Javascript修改表格记录

<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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

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