Table (html)-CSDN博客

本文链接：https://blog.csdn.net/zw7534313/article/details/83461646

1.<table id="tab" style="border-collapse: collapse;" border="1" class="table-line" bordercolor="#abcd00;"> //所有的td都会有bordercolor一样
<tr><td class="title-line01">姓名</td><td class="title-line01">年龄</td><td class="title-line01"><a href="javascript:add();">添加</a><a href="javascript:del();">删除</a></td></tr>
</table>

2. <table style="border-color: #abcd00;" > //table外边框

3.<script type="text/javascript">

  function add(){
   var tab=document.getElementById("tab");
   var row=tab.insertRow();
   var t1=row.insertCell();
   t1.innerHTML="X";
   var t2=row.insertCell();
   t2.innerHTML="Y";
      var t3=row.insertCell();
   t3.innerHTML="<input type=\"checkbox\" name=\"box\" value=\"1\"/>";
  }
function del() {
       var mytable = document.getElementById("tab");
        var c = document.getElementsByName("box");
        var count = c.length;
        for (var i = 0; i < count; i++) {
            if (c[i].checked) {
                mytable.deleteRow(i + 1);
                i--;
                count--;
            }
        }
    }
</script>
</head>

<body>
  <table id="tab" align="center" style="border-collapse: collapse;" border="1" class="table-line" bordercolor="#abcd00;">
  <tr><td class="title-line01">姓名</td><td class="title-line01">年龄</td><td class="title-line01"><a href="javascript:add();">添加</a>  <a href="javascript:del();">删除</a></td></tr>
</table>

</body>
</html>