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

深碍√TFBOYSˉ_ 2022-05-15 12:05 306阅读 0赞

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