使用DOM操作表格

最新推荐文章于 2021-11-22 08:51:39 发布

大海知天空

最新推荐文章于 2021-11-22 08:51:39 发布

阅读量350

点赞数

本文链接：https://blog.csdn.net/weixin_42044486/article/details/84027971

版权

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Document</title>
   <style>
       #table{
           text-align: center;
       }
   </style>
   <script>
       //添加新行
       function addNewTr(){
var lastRow = document.getElementById("lastRow");
var newTr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
td1.innerHTML = "103";
td2.innerHTML = "詹姆斯";
td3.innerHTML = "25897456";
td4.innerHTML = "547883";
//把td添加到tr中
newTr.appendChild(td1);
newTr.appendChild(td2);
newTr.appendChild(td3);
newTr.appendChild(td4);
if(confirm("是否添加新行？")){
lastRow.parentNode.appendChild(newTr);
}
//或者 document.getElementById("tbody").appendChild(newTr);

       }
       //复制表头行
       function copyHeadTr(){
          var thead = document.getElementById("thead");
          var copyThead = thead.cloneNode(true);
          if(confirm("是否添加？")){
              thead.parentNode.appendChild(copyThead);
          }
       }
       //删除数据首行
       function deleFirstTr(){
          var tbody = document.getElementById("firstTr");
          if(confirm("删除吗？")){
             tbody.parentNode.removeChild(tbody);
          }
       }
   </script>
</head>
<body>
   <table border="1" width="500" id="table">
       <thead>
           <tr id="thead">
               <td>编号</td>
               <td>姓名</td>
               <td>电话号码</td>
               <td>月薪（元）</td>
           </tr>
       </thead>
       <tbody id="tbody">
           <tr id="firstTr">
               <td>100</td>
               <td>库里</td>
               <td>125478</td>
               <td>25410</td>
           </tr>
           <tr>
               <td>101</td>
               <td>科比</td>
               <td>1478954</td>
               <td>111111</td>
           </tr>
           <tr id="lastRow">
               <td>102</td>
               <td>图蓝天</td>
               <td>4789512</td>
               <td>245845</td>
           </tr>
       </tbody>

   </table>
   <br />
   <input type="button" value="添加新行" οnclick="addNewTr()"/>
   <input type="button" value="复制表头行" οnclick="copyHeadTr()" />
   <input type="button" value="删除数据首行" οnclick="deleFirstTr()"/>
</body>
</html>

大海知天空

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用DOM操作表格

&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
复制链接

扫一扫