jquery 怎样删除表格倒数第三行，和在倒数第二行上面插入一行

jquery 怎样删除表格倒数第三行，和在倒数第二行上面插入一行<table width="200" border="1">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
jquery

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

jQuery 对table的支持不多，用DOM
<table width="200" border="1">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
</table>
<script>
var row = document.getElementsByTagName("table")[0].insertRow(1);
var col = row.insertCell(0);
col.innerHTML = 1.5; document.getElementsByTagName("table")[0].deleteRow(0);
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table id="tb1"  width="200" border="1">
  <tr>
    <td> 1</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>2</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>3 </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> 4</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>5 </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>6 </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>7 </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> 12112</td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td>z </td>
  </tr>
  <tr>
    <td>zz </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
<script>
  $(function(){
   var tr=$("tr:eq(-3)")
   var tr2=tr.clone(true)
     tr2.find('td').text('')
   tr.after( tr2 ).remove()

  })
</script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Editable TreeGrid - jQuery EasyUI Demo</title>
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript">
function add(){
$('tr:last').before("<tr><td>312312</td><td>321321</td><td>321321</td></tr>");
}
function del(){
$('tr:eq(-3)').remove();
}
</script>
</head>
<body>
<input type="button" value="添加" id="add" onclick="add()">
<input type="button" value="删除" id="del" onclick="del()">
<table width="200" border="1" id="test">
  <tr>
    <td>1</td>
    <td>2</td>
    <td> </td>
  </tr>
  <tr>
    <td>2</td>
    <td>3</td>
    <td> </td>
  </tr>
  <tr>
    <td>312</td>
    <td>321</td>
    <td> </td>
  </tr>
  <tr>
    <td>11</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>113</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>33</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>444</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>1213</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>321312</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>321321</td>
    <td> </td>
    <td> </td>
  </tr>
</table></body>
</html>这是刚才测试用的，不知道可以实现你的那个不，稍等···
$("tr:eq("+$("table tr:last").index()-3+")").remove();var _tr="  <tr>    <td> </td>    <td> </td>    <td> </td>  </tr>";
_tr.insertAfter($("tr:eq("+$("table tr:last").index()-2+")");
隐藏显示就行了加个id<tr id="trPower">
    <td>权限;</td>
    <td> </td>
    <td> </td>
  </tr>$('#trPower')[$('站长2个radion的选择器:eq(0)').attr('checked')?'show':'hide']()
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Editable TreeGrid - jQuery EasyUI Demo</title>
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript">
function add(){
$('tr:eq(-2):last').before("<tr><td>权限</td><td><select></select></td></tr>");
}
function del(){
$('tr:eq(-3)').remove();
}
</script>
</head>
<body>
<table width="200" border="1" id="test">
  <tr>
    <td>帐号</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>姓名</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>密码</td>
    <td><input type="password"></td>
  </tr>
  <tr>
    <td>站点</td>
    <td><select></select></td>
  </tr>
  <tr>
    <td>站长</td>
    <td><input type="radio" id="yes" name="z" value="1" onclick='add()'>是<input type="radio" id="no" name="z" value="2" onclick='del()'>否</td>
  </tr>
  <tr>
    <td>有效期</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>验证码</td>
    <td><input type="text"></td>
  </tr>
</table></body>
</html>不过有点小问题，就是那个点击事件···，初始化直接点否那个选择框就没了，你看看怎么改下
那个， $('tr:eq(-2)').before("<tr><td>权限</td><td><select></select></td></tr>");
那个选择器的last可以去掉··
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Editable TreeGrid - jQuery EasyUI Demo</title>
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript">
function add(){
if("权限"!=$('tr:eq(-3)').text().trim()){
$('tr:eq(-2)').before("<tr><td>权限</td><td><select></select></td></tr>");
}
}
function del(){
if("权限"==$('tr:eq(-3)').text().trim()){
$('tr:eq(-3)').remove();
}
}
</script>
</head>
<body>
<table width="200" border="1" id="test">
  <tr>
    <td>帐号</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>姓名</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>密码</td>
    <td><input type="password"></td>
  </tr>
  <tr>
    <td>站点</td>
    <td><select></select></td>
  </tr>
  <tr>
    <td>站长</td>
    <td><input type="radio" id="z" name="z" value="1" onclick='add()'>是<input type="radio" id="z" name="z" value="2" onclick='del()'>否</td>
  </tr>
  <tr>
    <td>有效期</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>验证码</td>
    <td><input type="text"></td>
  </tr>
</table></body>
</html>最后一个版本···，然后就木有然后了
13楼那个没反应？你的table怎么写的？我这里测试通过才发给你的
没反应呀我直接拿你源码测试的，告诉我下你扣扣我加你
那个，你导入jquery文件了吗
#2 不是实现了? 就是刷太快了没感觉     $(function(){
              var tr=$("tr:eq(-3)")  //取倒3
               var tr2=tr.clone(true)     //复制一行
                tr2.find('td').text('')  //清空
               tr.after( tr2 ).remove() //倒3后加一行，也就是倒2前加一行，并且删除原倒3

      })
不至于吧，你新建一个html试试看····，然后引入正确的js路径····
用DOM操作更简单些
本人的一点源码参考一下
if (weizhi==0){
var cur_obj_row=$(tbody).children().eq(cur_row); //取得光标所在的行的位置的行号节点
$(cur_obj_row).before(tr); //在光标所在的行前面面加入行
total_row++;
}else{
if (cur_cell_tagname=="TH"){ //如果当前位置是标题栏就在表体最开始加入行
$(tbody).prepend(tr);
total_row++;
}else{//否则就是在表体了
var cur_obj_row=$(tbody).children().eq(cur_row); //取得光标所在的行的位置的行号节点
$(cur_obj_row).after(tr); //在光标所在的行后面加入行
total_row++;
}
}
这段代码测试过了
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Editable TreeGrid - jQuery EasyUI Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>    <script type="text/javascript">
     $(document).ready(function() {
     cur_is_zhanzhang=false;
     });

    function add(cobj){
var tr=document.createElement('tr');
tr.innerHTML="<td>权限</td><td><select></select></td>";
var cur_obj=cobj;
     var cur_sele=cur_obj.value;
     var cur_obj_row=cur_obj.parentNode.parentNode;  //返回行节点
     var cur_obj_row_no=$(cur_obj).parent().parent().index(); //节点行号
     //var cur_obj_row=${"#test").children().eq(0).children().eq(0);
if (cur_sele==1){
if(cur_is_zhanzhang==false){
$(cur_obj_row).after(tr);
cur_is_zhanzhang=true;
}else{
return;
}
}else{
if(cur_is_zhanzhang==false){
return;
}else{
var zzh=$(cur_obj_row).parent().children().eq(cur_obj_row_no+1);
$(zzh).remove();
cur_is_zhanzhang=false;
}
}
  }    </script>
</head>
<body>
<table width="200" border="1" id="test">
  <tr>
    <td>帐号</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>姓名</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>密码</td>
    <td><input type="password"></td>
  </tr>
  <tr>
    <td>站点</td>
    <td><select></select></td>
  </tr>
  <tr >
    <td>站长</td>
    <td><input type="radio" id="z" name="z" value="1" onclick='add(this)'>是<input type="radio" id="z" name="z" value="2" onclick='add(this)'>否</td>
  </tr>
  <tr>
    <td>有效期</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>验证码</td>
    <td><input type="text"></td>
  </tr>
</table>

</body>
</html>
不至于吧，你新建一个html试试看····，然后引入正确的js路径····现在可以了，但是，重复点是，或否，会一直删除或者添加应该怎么办呀
不至于吧，你新建一个html试试看····，然后引入正确的js路径····现在可以了，但是，重复点是，或否，会一直删除或者添加应该怎么办呀
我说你有仔细看嘛， 13楼的那个，注意红色字，我不是给你加判断了···
function add(){
        if("权限"!=$('tr:eq(-3)').text().trim()){//这里，判断那个是不是权限，不是的话在添加
            $('tr:eq(-2)').before("<tr><td>权限</td><td><select></select></td></tr>");
        }
    }
    function del(){
        if("权限"==$('tr:eq(-3)').text().trim()){//这里是判断是不是权限，是在删除
            $('tr:eq(-3)').remove();
        }
    }
我不会js可以帮我写下么
你把你那段点击事件发一下，我给你改改，这里已经实现你要的效果了
function add(){
        if("权限"!=$('tr:eq(-3)').text().trim()){
            $('tr:eq(-2)').before("<tr><td>权限</td><td><select></select></td></tr>");
        }
    }
    function del(){
        if("权限"==$('tr:eq(-3)').text().trim()){
            $('tr:eq(-3)').remove();
        }
    }
    </script>
只有这一段呀，没有其它的呀