[英]Edit functionality using JavaScript
我必须使用 javascript 在动态生成的行中添加、编辑和删除功能。 我坚持使用编辑功能。 虽然我已经搜索过并且可以完成,但是使用了 php。 我不需要 php 。 有人可以告诉我如何以简单的方式制作它。 添加和删除功能有效。 但编辑功能不起作用。
<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>
这是您的代码中的一些更改,您必须将innerHtml
代码添加到editrow
函数中
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=""; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.