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

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

2019-04-02 19:55:50 作者：互联网

//删除某行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

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

//删除 某行tr

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

//删除某行tr