js控制增加删除行的例子

来源：互联网发布：js做地区选择器仿ios 编辑：程序博客网时间：2024/05/03 04:49

自己写的:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Test </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="动态增加行">
<META NAME="Description" CONTENT="http://qwzsky.cnblogs.com/">
</HEAD>
<style type="text/css">
table{
border : 1px solid black ;
}
td{
width : 100px ;
border : 1px solid black ;
}
</style>

_table.appendChild(node);
}

    function deleteRow(){


  _table.childNodes[0].removeNode(true);

    }
</script>

<BODY>
<input id="Insert" type="button" value="Insert" onclick="insertRow();">
<input id="Delete" type="button" value="Delete" onclick="deleteRow();">
<table border="1" id= tbl>
   <tr>
      <td><input type="checkbox"></input></td>
      <td>NO</td>
      <td>UserID</td>
      <td>Name</td>
   </tr>
</table>

</BODY>
</HTML>

别人的例子:

</head>
<body>
    <table id =table1 bordercolor="#000000" width="200" border="1">
      <tr>
               <td>00</td> <td>01</td> <td>02</td>
   </tr>
   <tr>
               <td>10</td> <td>11</td> <td>12</td>
   </tr>
    <tr>
               <td>20</td> <td>21</td> <td>22</td>
   </tr>
    </table>
<br>
<input type="button" value="删除一行" onclick="deleRow()">
<input type="button" value="删除一列" onclick="deleColum()">
<BR>
<input type="button" value="增加一行" onclick="addRow()">
<input type="button" value="增加一列" onclick="addColum()">

  function addColum()
  {
          var colum = _table.rows[0].cells.length;

    for(var i=0;i<_table.rows.length;i++)
    {
           var tdNode = _table.rows[i].insertCell(colum);
     var text = document.createTextNode(i);
     tdNode.appendChild(text);
    }
  }

  function addRow()
  {
         var trNode = _table.insertRow(_table.rows.length);
   for (var j=0;j<_table.rows[0].cells.length;j++)
   {
            var tdNode = trNode.insertCell(j);
   var text =document.createTextNode(j);

   tdNode.appendChild(text);

   }
  }
</script>
</body>
</html>

自己写的可以根据checkbox来动态删除

<BODY>
<input id="Insert" type="button" value="Insert" onclick="insertRow();">
<input id="Delete" type="button" value="Delete" onclick="deleteRow();">
<table border="1" id= tbl>
   <tr>
      <td><input type="checkbox" name ="ck"></input></td>
      <td>NO</td>
      <td>UserID</td>
      <td>Name</td>
   </tr>
</table>

</BODY>
</HTML>
增加了全选按钮后的页面：

    function deleteRow(){
     var _table=document.getElementById('tbl');
  var ok=document.getElementsByName('ck');
         var checkBoxArray = new Array();
  var allInputObject=document.body.getElementsByTagName("input");
  var checkBoxIndex =0;
  for( var i =0;i<allInputObject.length;i++)
  {
             if(allInputObject[i].type=='checkbox')
    {
                checkBoxArray[checkBoxIndex]= allInputObject[i];
    checkBoxIndex++;
    }
  }

  for(var i=1;i<ok.length;i++)
  {

    if(ok[i].checked==true)
    {

            _table.deleteRow(i);
   i=i-1;

    }
  }
    }

</script>

<BODY>
<input type="checkbox" id="check" onclick="check();" checked="false"></input>
<script language="javascript">
     function check()
{
    var checkboxs=document.getElementsByName('ck');
    var check = document.getElementById('check');
       var checktype = check.checked;
    for(var i=0;i<checkboxs.length;i++)
    {
         checkboxs[i].checked = checktype;
    }
}
</script>
<input id="Insert" type="button" value="Insert" onclick="insertRow();">
<input id="Delete" type="button" value="Delete" onclick="deleteRow();">

<table border="1" id= tbl>
   <tr>
      <td><input type="checkbox" name ="ck" ></input></td>
      <td>NO</td>
      <td>UserID</td>
      <td>Name</td>
   </tr>
</table>

</BODY>
</HTML>