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>

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

猜你喜欢

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