javascript 如何一次删除table的多个tr？

table里有多个tr，每行都有checkbox，根据选中的checkbox来删除这行。我试了下似乎只删除找到的第一行，无发一次性删除所有选中的行。如何解决？看不懂，来个... table里有多个tr，每行都有checkbox，根据选中的checkbox来删除这行。我试了下似乎只删除找到的第一行，无发一次性删除所有选中的行。如何解决？
看不懂，来个别用原型的展开

 我来答

3个回答

#热议# 在购买新能源车时，要注意哪些？

learneroner

高粉答主

2015-08-14 · 关注我不会让你失望

知道大有可为答主

回答量：1.1万

采纳率：91%

帮助的人：6565万

我也去答题访问个人页

关注

展开全部

思路：获取选中的checkbox对象→利用parentNode获取父节点直到获取到所在行→循环删除。实例演示如下:

1、HTML结构

<table id = "test">
	<tr><td><input type="checkbox" name="test"></td><td>1</td><td>2</td><td>3</td></tr>
	<tr><td><input type="checkbox" name="test"></td><td>4</td><td>5</td><td>6</td></tr>
	<tr><td><input type="checkbox" name="test"></td><td>7</td><td>8</td><td>9</td></tr>
	<tr><td><input type="checkbox" name="test"></td><td>10</td><td>11</td><td>12</td></tr>
</table>
<input type="button" value="删除" onclick="fun()">

2、javascript代码

function fun(){
	var boxes = document.getElementsByName("test");
	for(i=0;i<boxes.length;i++){
		if(boxes[i].checked){
			tr = boxes[i].parentNode.parentNode;
			tr.parentNode.removeChild(tr);
		}
	}
}

3、效果演示

已赞过 已踩过<

评论收起

莪冭假
2008-01-06 · TA获得超过340个赞

知道小有建树答主

回答量：200

采纳率：100%

帮助的人：132万

我也去答题访问个人页

关注

展开全部

<html>   
  <head>   
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">   
  <style   type="text/css">*{font-size:14px}button{margin:3px}</style>   
  <script   type="text/javascript">   
    
  var   mytable=null,mytable2=null;   
    
  window.onload=function(){   
  mytable=new   CTable("tbl",10);   
  mytable2=new   CTable("tbl2",6);   
  }   
    
  Array.prototype.each=function(f){for(var   i=0;i<this.length;i++)   f(this[i],i,this)}   
    
  function   $A(arrayLike){   
  for(var   i=0,ret=[];i<arrayLike.length;i++)   ret.push(arrayLike[i]);   
  return   ret   
  }   
    
  Function.prototype.bind   =   function()   {   
      var   __method   =   this,   args   =   $A(arguments),   object   =   args.shift();   
      return   function()   {   
          return   __method.apply(object,   args.concat($A(arguments)));   
      }   
  }   

function   CTable(id,rows){   
  this.tbl=typeof(id)=="string"?document.getElementById(id):id;     
  if   (rows   &&   /^\d+$/.test(rows))   this.addrows(rows)   
  }   
    
  CTable.prototype={   
  addrows:function(n){                     //随机添加n个tr   
  new   Array(n).each(this.add.bind(this))   
  },   
  add:function(){                       //添加1个tr   
  var   self=this;   
  var   tr   =   self.tbl.insertRow(-1),td1=   tr.insertCell(-1),td2=   tr.insertCell(-1),td3=   tr.insertCell(-1);   
  var   chkbox=document.createElement("INPUT")   
  chkbox.type="checkbox"   
  chkbox.onclick=self.highlight.bind(self)   
  td1.appendChild(chkbox)   
  td1.setAttribute("width","35")   
  td2.innerHTML=Math.ceil(Math.random()*99)   
  td3.innerHTML=Math.ceil(Math.random()*99)   
  },   
  del:function(){                       //删除所选tr   
  var   self=this   
  $A(self.tbl.rows).each(function(tr){if   (self.getChkBox(tr).checked)   tr.parentNode.removeChild(tr)})   
  },   
  up:function(){                             //上移所选tr   
  var   self=this   
  var   upOne=function(tr){                     //上移1个tr   
  if   (tr.rowIndex>0){   
  self.swapTr(tr,self.tbl.rows[tr.rowIndex-1])   
  self.getChkBox(tr).checked=true   
  }   
  }   
  var   arr=$A(self.tbl.rows).reverse()   
  if   (arr.length>0   &&   self.getChkBox(arr[arr.length-1]).checked){   
  for(var   i=arr.length-1;i>=0;i--){   
  if   (self.getChkBox(arr[i]).checked){   
  arr.pop()                         
  }else{   
  break   
  }   
  }   
  }   
  arr.reverse().each(function(tr){if   (self.getChkBox(tr).checked)   upOne(tr)});   
  },   
  down:function(){   
  var   self=this   
  var   downOne=function(tr){               
  if   (tr.rowIndex<self.tbl.rows.length-1)     {   
  self.swapTr(tr,self.tbl.rows[tr.rowIndex+1]);   
  self.getChkBox(tr).checked=true;   
  }   
  }   
  var   arr=$A(self.tbl.rows)   
    
  if   (arr.length>0   &&   self.getChkBox(arr[arr.length-1]).checked){   
  for(var   i=arr.length-1;i>=0;i--){   
  if   (self.getChkBox(arr[i]).checked){   
  arr.pop()   
  }else{   
  break   
  }   
  }   
  }   
  arr.reverse().each(function(tr){if   (self.getChkBox(tr).checked)   downOne(tr)});   
  },   
  sort:function(){                       //排序       
  var   self=this,order=arguments[0];   
  var   sortBy=function(a,b){   
  if   (typeof(order)=="number"){     //数字,则按数字指示的列排序   
  return   Number(a.cells[order].innerHTML)>=Number(b.cells[order].innerHTML)?1:-1;       //转化为数字类型比较大小   
  }else   if   (typeof(order)=="function"){           //为程序,按   程序的返回结果排序   
  return   order(a,b);   
  }else{   
  return   1;   
  }   
  }   
  $A(self.tbl.rows).sort(sortBy).each(function(x){   
  var   checkStatus=self.getChkBox(x).checked;   
  self.tbl.firstChild.appendChild(x);   
  if   (checkStatus)   self.getChkBox(x).checked=checkStatus;   
  });   
  },   
  rnd:function(){                       //随即选择几行tr   
  var   self=this,selmax=0,tbl=self.tbl;   
  if   (tbl.rows.length){   
    selmax=Math.max(Math.ceil(tbl.rows.length/4),1);     //选择的行数不超过tr数的1/4   
    $A(tbl.rows).each(function(x){   
  self.getChkBox(x).checked=false;   
  self.restoreBgColor(x)   
  })   
  }else{   
  return   alert("无数据可以选")   
  }   
  new   Array(selmax).each(function(){   
  var   tr=tbl.rows[Math.floor(Math.random()*tbl.rows.length)]   
  self.getChkBox(tr).checked=true;   
  self.highlight({target:self.getChkBox(tr)})   
  })   
  },   
  highlight:function(){                               //设置tr的背景色   
  var   self=this;   
  var   evt=arguments[0]   ||   window.event   
  var   chkbox=evt.srcElement   ||   evt.target   
  var   tr=chkbox.parentNode.parentNode   
  chkbox.checked?self.setBgColor(tr):self.restoreBgColor(tr)   
  },   
  swapTr:function(tr1,tr2){                           //交换tr1和tr2的位置   
  var   target=(tr1.rowIndex<tr2.rowIndex)?tr2.nextSibling:tr2;   
  var   tBody=tr1.parentNode   
  tBody.replaceChild(tr2,tr1);   
          tBody.insertBefore(tr1,target);   
  },   
  getChkBox:function(tr){                       //从tr得到   checkbox对象   
  return   tr.cells[0].firstChild   
  },   
  restoreBgColor:function(tr){                       
  tr.style.backgroundColor="#ffffff"     
  },   
  setBgColor:function(tr){   
  tr.style.backgroundColor="#c0c0c0"   
  }   
  }   
    
  function   f(a,b){   
  var   sumRow=function(row){return   Number(row.cells[1].innerHTML)+Number(row.cells[2].innerHTML)};   
  return   sumRow(a)>sumRow(b)?1:-1;   
  }   
    
  </script>   
    
  </head>   
  <body>   
    
  <button     onClick="javascript:mytable.rnd()">随机选择行</button>   
  <button     onClick="javascript:mytable.add()">添加一行</button>   
  <button     onClick="javascript:mytable.del()">删除选定行</button>   
  <button     onClick="javascript:mytable.up()">上移选定行</button>   
  <button     onClick="javascript:mytable.down()">下移选定行</button>   
  <button     onClick="javascript:mytable.sort(1)">按第一列数字排序</button>   
  <button     onClick="javascript:mytable.sort(f)">按每行数据的和排序</button>   
  <br/><br/>   
  <table   width=100%>   
  <tr>   
  <td   valign="top"><table   border   id="tbl"   width="80%"></table></td>   
  <td   valign="top"><table   border   id="tbl2"   width="80%"></table></td>   
  </tr>   
  </table>   
  <br/><br/>   
  <button     onClick="javascript:mytable2.rnd()">随机选择行</button>   
  <button     onClick="javascript:mytable2.add()">添加一行</button>   
  <button     onClick="javascript:mytable2.del()">删除选定行</button>   
  <button     onClick="javascript:mytable2.up()">上移选定行</button>   
  <button     onClick="javascript:mytable2.down()">下移选定行</button>   
  <button     onClick="javascript:mytable2.sort(2)">按第二列数字排序</button>   
  <button     onClick="javascript:mytable2.sort(f)">按每行数据的和排序</button>   
    
  </body>   
  </html>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

遇见暴风雪
2018-03-27

知道答主

回答量：1

采纳率：0%

帮助的人：887

我也去答题访问个人页

关注

展开全部

此方法需要在后台删除返回true时调用,把后台已经删除的数据隐藏掉，下次向后台查询时这些数据也不会再次出现！
var a = [];//需要删除的行的index
$("input[name='del']:checked").each(function() { // 遍历选中的checkbox
n = $(this).parents("tr").index(); // 获取checkbox所在行的顺序
a.push(n);
});
for(var i = 0; i < a.length; i++) {
$("#table_id tr").eq(a[i]+1).attr("hidden","hidden");
}

已赞过 已踩过<

评论收起

1条折叠回答

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

javascript 如何一次删除table的多个tr？

其他类似问题

为你推荐：