首先先简单创建一个只有一行表格还有一个新增按钮、一个删除按钮。

如图:

0e13adb5dd5b4ef8486adea4aefa686f_70.png

对应的html代码:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <title> New Document </title>
  
    <script src="js/editTable.js"  language="javascript"></script>
 </head>
 
 <body>
     <input type="button" value="新增" onclick="createRow()">
     <input type="button" value="删除" onclick="delRow()">

     <table id="editTable" border="1" width="800">
         <tr>
            <th>选择</th>
            <th>姓名</th>
            <th>性别</th>
            <th>电话</th>
         </tr>
         <tbody id="tbody">
 
         </tbody>
     </table>
 </body>
</html>
————————————————
版权声明:本文为CSDN博主「summerhmy」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/summerhmy/article/details/82892271

然后我们编写javascript脚本完成动态增加行的操作:

function createRow(){
    var editTable=document.getElementById("tbody");
    var tr=document.createElement("tr");
    var td0=document.createElement("td");
    var checkbox=document.createElement("input");
    checkbox.type="checkbox";
    checkbox.name="checkRow";
    td0.appendChild(checkbox);
    var td1=document.createElement("td");
    td1.innerHTML="<input type='text' />";
    var td2=document.createElement("td");
    td2.innerHTML="a2";
    var td3=document.createElement("td");
    td3.innerHTML="a3";
    tr.appendChild(td0);
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    editTable.appendChild(tr);

————————————————
版权声明:本文为CSDN博主「summerhmy」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/summerhmy/article/details/82892271

创建tr和td元素,增加行。

效果:

6ff77e6cccf904b2f3bf6feb0644dde3_70.png

在编写删除按钮的javascript脚本

function delRow(){
    var editTable=document.getElementById("tbody");
    if(confirm("确认删除所选?")){
        var checkboxs=document.getElementsByName("checkRow");
        for(var i=0;i<checkboxs.length;i++){
            if(checkboxs[i].checked){
                var n=checkboxs[i].parentNode.parentNode;
                editTable.removeChild(n);
                i--;
            }
        }

    }
}
————————————————
版权声明:本文为CSDN博主「summerhmy」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/summerhmy/article/details/82892271

效果:

1f712d0d70116b7907f76ef21a9b24a0_70.png


动态生成表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #t1 tr td{width: 100px;height: 30px;}
        .box0{background-color: white;}
        .box1{background-color: #dcdcdc;}
    </style>

    <script>
        window.onload = function(){
            var oRow = document.getElementById("row");
            var oCol = document.getElementById("col");
            var oBtn = document.getElementById("btn1");
            var oT1 = document.getElementById("t1");


            //给表格上的事件按钮添加事件委托
            oT1.onclick = function(ev){
                var e = ev || window.event;
                var target = e.target || window.event.srcElement;
                if(target.nodeName.toLowerCase() == 'button')
                {
                    oT1.removeChild(target.parentNode.parentNode);
                }
            }
            oBtn.onclick = function(){
                if(!oRow.value || !oCol.value)
                {
                    alert("请输入对应的行列!");
                }else{
                    for(var i=0;i<oRow.value;i++){
                        var oTr = document.createElement("tr");
                        oTr.className = 'box' + (i % 2);
                         for(var j=0;j<oCol.value;j++){
                            var oTd = document.createElement("td");
                            oTr.appendChild(oTd);
                        }
                        var oClose = document.createElement("td");
                        oClose.innerHTML = "<button>删除</button>";
                        oTr.appendChild(oClose);
                        oT1.appendChild(oTr);
                    }
                }
            }
        }
    </script>
</head>
<body>
    <input type="text" placeholder="行" id="row"/>
    <input type="text" placeholder="列" id="col"/>
    <button id="btn1">生成</button>
    <table id ='t1' border = '1'>

    </table>
</body>
</html>
————————————————
版权声明:本文为CSDN博主「东方求败、」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/wang_swa99er/article/details/120270911

请输入图片描述


JavaScript动态向表格添加数据

利用javascript ,动态向表格中添加数据

  1. 首先先写出表格的表头和主干部分
 <table width="600" border="1" cellspacing="0">
    <thead>
       <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>职位</th>
          <th>操作</th>
       </tr> 
    </thead>
    <tbody id="tbMain"></tbody>
 </table>
————————————————
版权声明:本文为CSDN博主「ChauncyWu」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/ChauncyWu/article/details/54695740
  1. 接下来就是网表格里面添加数据,这里用的是原生javascript

<script type="text/javascript">
  
  //模拟一段JSON数据,实际要从数据库中读取
  var per = [
              {id:001,name:'张珊',job:'学生'},
            {id:002,name:'李斯',job:'教师'},
            {id:003,name:'王武',job:'经理'}
            ]; 
  
  window.onload = function(){
      var tbody = document.getElementById('tbMain');
      
      for(var i = 0;i < per.length; i++){ //遍历一下json数据
          var trow = getDataRow(per[i]); //定义一个方法,返回tr数据
            tbody.appendChild(trow);
        }
      
      }
      
  function getDataRow(h){
     var row = document.createElement('tr'); //创建行
     
     var idCell = document.createElement('td'); //创建第一列id
     idCell.innerHTML = h.id; //填充数据
     row.appendChild(idCell); //加入行  ,下面类似
     
     var nameCell = document.createElement('td');//创建第二列name
     nameCell.innerHTML = h.name;
     row.appendChild(nameCell);
     
     var jobCell = document.createElement('td');//创建第三列job
     jobCell.innerHTML = h.job;
     row.appendChild(jobCell);
     
     //到这里,json中的数据已经添加到表格中,下面为每行末尾添加删除按钮
     
     var delCell = document.createElement('td');//创建第四列,操作列
     row.appendChild(delCell);
     var btnDel = document.createElement('input'); //创建一个input控件
     btnDel.setAttribute('type','button'); //type="button"
     btnDel.setAttribute('value','删除'); 
     
     //删除操作
     btnDel.οnclick=function(){
         if(confirm("确定删除这一行嘛?")){
             //找到按钮所在行的节点,然后删掉这一行
             this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
             //btnDel - td - tr - tbody - 删除(tr)
             //刷新网页还原。实际操作中,还要删除数据库中数据,实现真正删除
             }
         }
     delCell.appendChild(btnDel);  //把删除按钮加入td,别忘了
     
     return row; //返回tr数据     
     }      
</script>
————————————————
版权声明:本文为CSDN博主「ChauncyWu」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/ChauncyWu/article/details/54695740
  1. 网页测试

4.

  1. d0a838b1828128027c610d2c08508884_SouthEast.jpg

显示成功,点击删除按钮,并确定即可删除这一行

删除第二行,可以!

8b315d1e2f5c51a02504c1cd523097a9_SouthEast.jpg

Last modification:February 4, 2023
如果觉得我的文章对你有用,请随意赞赏