I have to make add, edit and delete functionality in dynamically generated rows using javascript. I am stuck with the edit functionality . Though I have searched and it can be done but in that php is used . I don't need php . Can someone tell me how to make it in easy way . Add and delete functions worked. But Edit function doesn't work.
<script>
document.write("<table id='TABLE' border='1' width='500'>");
document.write("<tr>");
document.write("<td>ID</td>");
document.write("<td>Name</td>");
document.write("<td>Address</td>");
document.write("<td>Age</td>");
document.write("<td>Action</td>");
document.write("</tr>");
document.write("<tr id='row1'>");
document.write("<td id='id_row1'>1</td>");
document.write("<td id='name_row1'>Anu</td>");
document.write("<td id='address_row1'>Colombo</td>");
document.write("<td id='age_row1'>20</td>");
document.write("<td><button id='edit_button1' class='edit' onclick='editrow('1')'>Edit</button> <button id='save_button1' class='save' onclick='saverow('1')'>Save</button><button class='delete' onclick='deleterow()'>Delete</button></td>");
document.write("</tr>");
document.write("<tr id='row2'>");
document.write("<td id='id_row2'><input type='text' id='new_id'></td>");
document.write("<td id='name_row2'><input type='text' id='new_name'></td>");
document.write("<td id='address_row2'><input type='text' id='new_address'></td>");
document.write("<td id='age_row2'><input type='text' id='new_age'></td>");
document.write("<td><button onclick='addrow()'>Add Row</button></td>");
document.write("</tr>");
document.write("</table>");
function editrow(x){
document.getElementById("edit_button"+x).style.display="none";
document.getElementById("save_button"+x).style.display="block";
var id=document.getElementById("id_row"+x);
var name=document.getElementById("name_row"+x);
var address=document.getElementById("address_row"+x);
var age=document.getElementById("age_row"+x);
var id_data=id.innerHTML;
var name_data=name.innerHTML;
var address_data=address.innerHTML;
var age_data=age.innerHTML;
var id_data="<input type='text' id='id_text"+x+"' value='"+id_data+"'>";
var name_data="<input type='text' id='name_text"+x+"' value='"+name_data+"'>";
var address_data="<input type='text' id='address_text"+x+"' value='"+address_data+"'>";
var age_data="<input type='text' id='age_text"+x+"' value='"+age_data+"'>";
}
function saverow(y){
var id_val=document.getElementById("id_text"+y).value;
var name_val=document.getElementById("name_text"+y).value;
var address_val=document.getElementById("address_text"+y).value;
var age_val=document.getElementById("age_text"+y).value;
document.getElementById("id_row"+y).innerHTML=id_val;
document.getElementById("name_row"+y).innerHTML=name_val;
document.getElementById("address_row"+y).innerHTML=address_val;
document.getElementById("age_row"+y).innerHTML=age_val;
document.getElementById("edit_button"+y).style.display="block";
document.getElementById("save_button"+y).style.display="none";
}
function deleterow() {
var td = event.target.parentNode;
var tr = td.parentNode;
tr.parentNode.removeChild(tr);
}
function addrow(){
var new_id=document.getElementById("new_id").value;
var new_name=document.getElementById("new_name").value;
var new_address=document.getElementById("new_address").value;
var new_age=document.getElementById("new_age").value;
var mytable=document.getElementById("TABLE");
var t_length=(mytable.rows.length)-1;
var row = mytable.insertRow(t_length).outerHTML="<tr id='row"+t_length+"'><td id='id_row"+t_length+"'>"+new_id+"</td><td id='name_row"+t_length+"'>"+new_name+"</td><td id='address_row"+t_length+"'>"+new_address+"</td><td id='age_row"+t_length+"'>"+new_age+"</td><td><input type='button' id='edit_button"+t_length+"' value='Edit' class='edit' onclick='editrow("+t_length+")'> <input type='button' id='save_button"+t_length+"' value='Save' class='save' onclick='saverow("+t_length+")'> <input type='button' value='Delete' class='delete' onclick='deleterow("+t_length+")'></td></tr>";
document.getElementById("new_id").value="";
document.getElementById("new_name").value="";
document.getElementById("new_address").value="";
document.getElementById("new_age").value="";
}
</script>
here is some changes in your code, you have to add innerHtml code into editrow function
document.write("<table id='TABLE' border='1' width='500'>");
document.write("<tr>");
document.write("<td>ID</td>");
document.write("<td>Name</td>");
document.write("<td>Address</td>");
document.write("<td>Age</td>");
document.write("<td>Action</td>");
document.write("</tr>");
document.write("<tr id='row1'>");
document.write("<td id='id_row1'>1</td>");
document.write("<td id='name_row1'>Anu</td>");
document.write("<td id='address_row1'>Colombo</td>");
document.write("<td id='age_row1'>20</td>");
document.write("<td><button id='edit_button1' class='edit' onclick='editrow('1')'>Edit</button> <button id='save_button1' class='save' onclick='saverow('1')'>Save</button><button class='delete' onclick='deleterow()'>Delete</button></td>");
document.write("</tr>");
document.write("<tr id='row2'>");
document.write("<td id='id_row2'><input type='text' id='new_id'></td>");
document.write("<td id='name_row2'><input type='text' id='new_name'></td>");
document.write("<td id='address_row2'><input type='text' id='new_address'></td>");
document.write("<td id='age_row2'><input type='text' id='new_age'></td>");
document.write("<td><button onclick='addrow()'>Add Row</button></td>");
document.write("</tr>");
document.write("</table>");
function editrow(x){
document.getElementById("edit_button"+x).style.display="none";
document.getElementById("save_button"+x).style.display="block";
var id=document.getElementById("id_row"+x);
var name=document.getElementById("name_row"+x);
var address=document.getElementById("address_row"+x);
var age=document.getElementById("age_row"+x);
var id_data=id.innerHTML;
var name_data=name.innerHTML;
var address_data=address.innerHTML;
var age_data=age.innerHTML;
var id_data="<input type='text' id='id_text"+x+"' value='"+id_data+"'>";
var name_data="<input type='text' id='name_text"+x+"' value='"+name_data+"'>";
var address_data="<input type='text' id='address_text"+x+"' value='"+address_data+"'>";
var age_data="<input type='text' id='age_text"+x+"' value='"+age_data+"'>";
id.innerHTML = (id_data);
name.innerHTML = (name_data);
address.innerHTML = (address_data);
age.innerHTML = (age_data);
}
function saverow(y){
var id_val=document.getElementById("id_text"+y).value;
var name_val=document.getElementById("name_text"+y).value;
var address_val=document.getElementById("address_text"+y).value;
var age_val=document.getElementById("age_text"+y).value;
document.getElementById("id_row"+y).innerHTML=id_val;
document.getElementById("name_row"+y).innerHTML=name_val;
document.getElementById("address_row"+y).innerHTML=address_val;
document.getElementById("age_row"+y).innerHTML=age_val;
document.getElementById("edit_button"+y).style.display="block";
document.getElementById("save_button"+y).style.display="none";
}
function deleterow() {
var td = event.target.parentNode;
var tr = td.parentNode;
tr.parentNode.removeChild(tr);
}
function addrow(){
var new_id=document.getElementById("new_id").value;
var new_name=document.getElementById("new_name").value;
var new_address=document.getElementById("new_address").value;
var new_age=document.getElementById("new_age").value;
var mytable=document.getElementById("TABLE");
var t_length=(mytable.rows.length)-1;
var row = mytable.insertRow(t_length).outerHTML="<tr id='row"+t_length+"'><td id='id_row"+t_length+"'>"+new_id+"</td><td id='name_row"+t_length+"'>"+new_name+"</td><td id='address_row"+t_length+"'>"+new_address+"</td><td id='age_row"+t_length+"'>"+new_age+"</td><td><input type='button' id='edit_button"+t_length+"' value='Edit' class='edit' onclick='editrow("+t_length+")'> <input type='button' id='save_button"+t_length+"' value='Save' class='save' onclick='saverow("+t_length+")'> <input type='button' value='Delete' class='delete' onclick='deleterow("+t_length+")'></td></tr>";
document.getElementById("new_id").value="";
document.getElementById("new_name").value="";
document.getElementById("new_address").value="";
document.getElementById("new_age").value="";
}