其他分享
首页 > 其他分享> > js table 常用操作 删除 复制(克隆) 添加 某一行

js table 常用操作 删除 复制(克隆) 添加 某一行

作者:互联网

//删除 某行tr

function deleterow(obj){   //
  var flag=confirm("确定要删除吗?");  //提示是否要删除 flag=true/false (  true删除  false不删除)
      if(flag==true){
    var tr=obj.parentNode.parentNode;  //parentNode父节点
    var table=tr.parentNode;
    table.removeChild(tr); //删除子节点
else{}
 
}
 
 
 
<body>
   onclick="deleterow(this)"
</body>

 

 

//复制 某行

function addrow(obj){
  var tr=obj.parentNode.parentNode;//obj.parentNode.parentNode是<tr>
    var table=tr.parentNode; //tr.parentNode是<table>
    var y=table.rows.length;
    var oldRow=tr;
    
    if(oldRow){
        var newRow=oldRow.cloneNode(true); //拷贝一行项到另外一行
        newRow.setAttribute("id","y-1");
        }
        table.appendChild(newRow);    //把克隆的一行添加到table
}
 
 
 
 
<body>
   onclick="addrow(this)"
</body>

 

//添加一行数据

 function tianjia(){    //在最后一行添加新商品数据  一行 table[ 1个tr [ 含有6个td   ]  ]
    var table=document.getElementById("myToby");   
       //第一种添加tr方法
   var newRow=document.createElement("tr");
    var td1=document.createElement("td");
    td1.innerHTML='<input   type="checkbox"  name="shop" value="4"   /> <img src="U盘c.jpg" width="100px"  />' ;
    var td2=document.createElement("td");
     td2.innerHTML="360随身WiFi3 300M 无线网卡 迷你路由器 黑色 ";
      var td3=document.createElement("td");
       td3.innerHTML="¥69.00";
        var td4=document.createElement("td");
        td4.innerHTML=' <input type="text" name="price" value="1"  style="width:100px;" onchange="sum()" />'; //易错地方 通过innerHTML写入代码 需要加 ''(单引号)
          var td5=document.createElement("td");
           td5.innerHTML='<span id="sum4" class="red">¥69.00</span>';
            var td6=document.createElement("td");
           td6.innerHTML='<a href="#" onclick="deleterow(this)">删除</a><br /><a href="#" onclick="addrow(this)">点击再加入购物车一套</a>';
           newRow.appendChild(td1);    //先把td添加到tr ,再把tr添加到table
           newRow.appendChild(td2); 
           newRow.appendChild(td3); 
           newRow.appendChild(td4); 
           newRow.appendChild(td5); 
           newRow.appendChild(td6); 
           table.appendChild(newRow); 
           //第二种添加tr方法
  /*table.innerHTML+='<tr><td  align="center"><input   type="checkbox"  name="shop" value="1" /><img src="shu1.jpg" width="100px" /></td> <td valign="top"><a href="#"> 彩色连环画中国历史(第一辑,1-10册)</a></td><td valign="top" >¥<span id="one">199.00</span></td><td valign="top"><input type="text" name="price" value="4"  style="width:100px;"  onchange="sum()" /></td><td valign="top"><span id="sum4" class="red" >¥199.00</span></td><td valign="top"><a href="#" onclick="deleterow(this)">删除</a><br /><a href="#" onclick="addrow(this)">点击再加入购物车一套</a></td></tr>'*/
  }
  
<body>
   onclick="tianjia(this)"
</body>

 

转载:

https://blog.csdn.net/liujucai/article/details/82183141

标签:newRow,克隆,tr,parentNode,js,innerHTML,var,table
来源: https://blog.csdn.net/chen072086/article/details/88978680