`

Table (html)

    博客分类:
  • Html
阅读更多

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>&nbsp;&nbsp;<a href="javascript:del();">删除</a></td></tr>
 </table>

  </body>
</html>

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics