Javascript修改表格记录
来源:互联网 发布:源码翻译 编辑:程序博客网 时间:2024/05/22 05:21
<html> <head> <script type="text/javascript"> function Insert() { var row=document.getElementById("mytable").insertRow(-1); var col1=row.insertCell(0); var col2=row.insertCell(1); col1.innerHTML=document.getElementById("name").value; col2.innerHTML=document.getElementById("job").value; } function edit(oldstring,newstring) { var table=document.getElementById("mytable"); //document.write(table.rows.length); var temp=0; for(var i=1;i<table.rows.length;++i) { if(table.rows[i].cells[0].innerHTML==oldstring) { table.rows[i].cells[1].innerHTML=newstring; } } //document.write(temp); } </script> <style type="text/css"> #mytable td { width:100px; } tr.col_header { background-color:grey; } </style> </head> <body> <div> 姓名<input type="text" id="name"></input> </div> <div> 职业<input type="text" id="job"></input> </div> <input type="button" value="添加" onclick="Insert()"> <table id="mytable"> <tr class="col_header"><td>姓名</td><td>职业</td></tr> </table> <div> <div> 姓名<input type="text" id="oldstring"> </div> <div> 职业<input type="text" id="newstring"> </div> <input type="button" value="修改" onclick="edit(oldstring.value,newstring.value)"></div> </body> </html>