script添加删除行/js随意操控table…

最新推荐文章于 2022-03-28 21:08:30 发布

jarry.liu

最新推荐文章于 2022-03-28 21:08:30 发布

阅读量509

点赞数

分类专栏： JS专区

本文链接：https://blog.csdn.net/lsfhack/article/details/69664555

版权

JS专区专栏收录该内容

66 篇文章 0 订阅

订阅专栏

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

//要确定行的唯一性（提示：你可以使用你的主键）
   var id=1;
//添加行的方法
   function addTr()
   {
    //获得表格对象
    var tb=document.getElementByIdx_x_x('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 οnclick=\"moveTr('"+id+"');\" >移除</button>";;

    id++;

   }
   //移除行的方法
   function moveTr(id)
   {
    //获得表格对象(注意此处是表格对象Table，如果用到了thead和tbody，而取的是tbody的对象的话，删除行时需要考虑索引问题，行索引是针对整体，而如果获取的是tbody对象，删除时需要的索引是针对tbody自身，所以一定要减去thead的行数，切记切记，否则就会异常)
    var tb=document.getElementByIdx_x_x('testTab');
    //根据id获得将要删除行的对象
    var tr=document.getElementByIdx_x_x('tr'+id);
    //取出行的索引，设置删除行的索引
    tb.deleteRow(tr.rowIndex);

     //清空列表，移除全部行的方法
     //while(tb_show.hasChildNodes()){
     //tb_show.deleteRow();
     //}
   }

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

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

<!--

jarry.liu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
script添加删除行/js随意操控table…

js添加删除行<scripttype="text/javascript">//要确定行的唯一性（提示：你可以使用你的主键） var id=1;//添加行的方法 function addTr() { //获得表格对象 vartb=document.getElementByIdx_x_x('testTab'); //添加一行
复制链接

扫一扫