js中删除table里所有行_js删除table所有行-CSDN博客

本文提供JavaScript操作HTML Table的示例代码，包括删除Table中的所有行和动态添加、删除行的方法。通过具体实例展示了如何实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js中删除table里所有行

方法一

attAchments为table
var tb = document.getElementById('attAchments');
     var rowNum=tb.rows.length;
     for (i=0;i<rowNum;i++)
     {
         tb.deleteRow(i);
         rowNum=rowNum-1;
         i=i-1;
     }

方法二:

removeNode(true)使用。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>newpage</title>
</head>
<body>
<table border="1" width="100%" id="table1">
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
<script>
var t=document.getElementById("table1");
alert(t.outerHTML);
//删除所有行
t.firstChild.removeNode(true)
alert(t.outerHTML);
//增加一行
t.insertRow();
alert(t.outerHTML);
</script>
</html>

<html>
<head>
<title>js添加删除行</title>

//要确定行的唯一性（提示：你可以使用你的主键）
   var id=1;
//添加行的方法
   function addTr()
   {
    //获得表格对象
    var tb=document.getElementById('testTab');

    //添加一行
    var newTr = tb.insertRow(-1);//在最下的位置

    //给这个行设置id属性，以便于管理（删除）
    newTr.id='tr'+id;
    //设置对齐方式（只是告诉你，可以以这种方式来设置任何它有的属性）
    newTr.align='center';
    //添加两列
    var newTd0 = newTr.insertCell();
    var newTd1 = newTr.insertCell();

    //设置列内容和属性
    newTd0.innerHTML = "本行id为："+id; //让你看到删除的是指定的行
    newTd1.innerHTML= "<button onclick=\"moveTr('"+id+"');\" >移除</button>";;

    id++;

   }
   //移除行的方法
   function moveTr(id)
   {
    //获得表格对象
    var tb=document.getElementById('testTab');
    //根据id获得将要删除行的对象
    var tr=document.getElementById('tr'+id);
    //取出行的索引，设置删除行的索引
    tb.deleteRow(tr.rowIndex);

   }

</script>
</head>
<body>
<center>

   表格：
   <table id="testTab" border="1" bordercolor="red" width="700px" height="300px">
    <tr>
     <td>
      操控此表格
     </td>
     <td>
      第二列
     </td>
    </tr>
   </table>
   <button onclick="addTr();">添加一行</button>
   </center>
</body>
</html>