javascript修改表格记录

 1 <html>
 2   <head>
 3     <script type="text/javascript">
 4       
 5       function Insert()
 6       {
 7         var row=document.getElementById("mytable").insertRow(-1);
 8         var col1=row.insertCell(0);
 9         var col2=row.insertCell(1);
10         col1.innerHTML=document.getElementById("name").value;
11         col2.innerHTML=document.getElementById("job").value;
12       }
13      function edit(oldstring,newstring)
14       {
15         var table=document.getElementById("mytable");
16         //document.write(table.rows.length);
17         var temp=0;
18         for(var i=1;i<table.rows.length;++i)
19         {
20           if(table.rows[i].cells[0].innerHTML==oldstring)
21           {
22             table.rows[i].cells[1].innerHTML=newstring;
23           }
24         }
25         //document.write(temp);
26         
27       }
28     </script>
29     
30     <style type="text/css">
31       #mytable td
32       {
33         width:100px;
34       }
35       tr.col_header
36       {
37         background-color:grey;
38       }
39     </style>
40   </head>
41   
42   <body>
43     <div>
44       姓名<input type="text" id="name"></input>
45     </div>
46     <div>
47       职业<input type="text" id="job"></input>
48     </div>
49 
50  <input type="button" value="添加" onclick="Insert()">
51  
52 
53    
54     <table id="mytable">
55     <tr class="col_header"><td>姓名</td><td>职业</td></tr>
56     </table> 
57 <div>
58   <div>
59   姓名<input type="text" id="oldstring">
60   </div>
61   <div>
62     职业<input type="text" id="newstring">
63   </div>
64     <input type="button" value="修改" onclick="edit(oldstring.value,newstring.value)">
65 </div>
66   </body>
67   
68 </html>

 

你可能感兴趣的:(javascript修改表格记录)