Javascript修改表格记录

最新推荐文章于 2022-09-12 11:41:02 发布

编程老头

最新推荐文章于 2022-09-12 11:41:02 发布

阅读量681

点赞数

分类专栏： Javascript基础

本文链接：https://blog.csdn.net/sjtu081200/article/details/8684532

版权

Javascript基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<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="添加" οnclick="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="修改" οnclick="edit(oldstring.value,newstring.value)">
</div>
  </body>
  
</html>

编程老头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript修改表格记录

function Insert() { var row=document.getElementById("mytable").insertRow(-1); var col1=row.insertCell(0); var col2=row.insertCell(1); col1.innerHTML=document.getE
复制链接

扫一扫