javascript如何动态删除表格某一行

 

时间 金额  
            增加

这是一个表格,

<table id='tab1'>
                                <tr>
                                   <th>时间</th><th>金额></th></th>
                                </tr>
                              <tr>
                                <td></td><td><td><td><input type='button' value='增加' onclick=‘add()’></td>
                              </tr>
                         </table>    

 点击增加按钮的时候:触发事件

 

 

function add(){ 
var html='<div class="datepicker-target"></div>';
        var _len = $("#tab1 tr").length;
        var trhtml= "<tr    align='center'  id="+_len+">"+   " <td>"+html+"</td>"
                +"<td><input type='text' class='span2' name='money'/></td>"
                +"<td><button class='btn btn-danger' type='button' onclick='javascript:deltr("+_len+")'   >删除</button></td></tr>" ;
        $("#tab1").append(trhtml);
}

 删除按钮的时间如何写?动态删除行。

 

我目前写的方法是:

 

 function deltr(index){
                   var tab2=document.getElementById("tab2");
                  tab2.deleteRow(tab2.rows.length-1);
          }

 

 

但是这个删除有问题,加入我新增3行,我想删除新添加的第2行,它却删除的是最后一行,不是我想要的。

把方法修改成

 function deltr(index){
                   var tab2=document.getElementById("tab2");
                     index--;
                  tab2.deleteRow(index);
                   
          }

 假如我新增3行,我想删除第2行,此时index=2,这时删除时正确的,但是当我在点击删除最后一行的时候,此时index=3,表格的长度=2,这样删除不了了,报错了,下标越界,如何实现我删除指定的某一行?

 

 这个也是不正确的,假如我新增3行

1个回答

看你也用了jquery的,干嘛不直接根据index,获取对应tr行,然后直接remove掉
$("tr[id='"+index+"']").remove();

或者纯javascrip的table操作,
var tr = document.getElementById(index);
var tab2=document.getElementById("tab2");

tab2.removeChild(tr);

以上代码没测试过,你可以试试

zhengun
zhengun 经过测试可以,谢谢!
6 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问