使用jQuery删除多个表行

时间:2012-09-19 13:24:34

标签: javascript jquery jquery-selectors tablerow

当点击第一行中的链接时,我需要删除三行表。

这些行是使用jQuery动态创建的,并预先填写到表中。

var ups='';
        ups+='<tr data-file='+file_id+'>';
        ups+='<td width="40%">'+gl_file_name1+'</td><td>'+gl_upload_date1+'</td>';
        ups+='<td>'+gl_upload_desc+'</td>';
        ups+='<td><a href="sym.php?doc_id='+file_id+'" class="view2_fl">VIEW FILE</a> | <a href="javascript:void(0);" data-file='+file_id+' data-job='+job_id+' class="del2_fl">DELETE</a></td></tr>';
        ups+='<tr><td>'+priority+'</td><td>'+price+'</td><td>'+tender+'</td><td>&nbsp;</td></tr>';
        ups+='<tr class="bottom-row"><td colspan="4">'+notes+'</td><tr>';

        $(ups).prependTo('.app_table');

这与'文件'一样多次循环。

当按下DELETE链接时,我需要删除所有三行。到目前为止,我已设法使用以下代码删除第一行:

$(this).closest("tr").remove();

我曾尝试使用.next(),但这似乎不起作用。

3 个答案:

答案 0 :(得分:4)

获取带有链接的行,然后从那里获取下一行并添加到jQuery对象,并一次性删除所有三个:

var tr = $(this).closest("tr");
tr.add(tr.next()).add(tr.next().next()).remove();

首先获取所有三行,您不会遇到想要找到已删除的行旁边的行的问题。

答案 1 :(得分:3)

另一个想法,你可以使用像gt。

这样的选择器

例如:

$('tr:gt(1)').remove()

应删除第一行之后的行。

$('tr:eq(0)').remove()

应删除第一行

Reggards

答案 2 :(得分:2)

下一个()我应该认真工作。尝试将引用保存到最近的tr并首先删除其他tr,例如

var $tr = $(this).closest("tr");
$tr.next("tr").remove();
$tr.next("tr").remove();
$tr.remove();

演示小提琴:http://jsfiddle.net/rupw/tZMgs/