删除行时自动更改编号 [英] automatically change numbering on deleting a row
问题描述
我希望单击按钮后删除具有选中复选框的表行.我尝试了以下方法:
I want a table row having a checked checkbox to be deleted after clicking a button. I tried the following:
$(document).ready(function() {
$('table tr').each(function(i){
$(this).children('td:eq(0)').append(i+1);
//button click
$('.deletebtn').click(function(){
$('table input[type="checkbox"]').is(':checked')==true?$('table input[type="checkbox"]').is(":checked").parent('td').parent('tr').remove():$('table input[type="checkbox"]').parent('tr').show()
});
});
});
这不是仅由于if statement
中的.is(":checked")
而导致,如果我将其删除,代码将为:
This is not working only because of .is(":checked")
in the if statement
if i remove it, the code will be:
$(document).ready(function() {
$('table tr').each(function(i){
$(this).children('td:eq(0)').append(i+1);
//button click
$('.deletebtn').click(function(){
$('table input[type="checkbox"]').is(':checked')==true?$('table input[type="checkbox"]').parent('td').parent('tr').remove():$('table input[type="checkbox"]').parent('tr').show()
});
});
});
此代码将删除所有行,显然是因为我没有指出选中的复选框.因此,将$('table input[type="checkbox"]').parent('td').parent('tr')
作为所有行.
This code deletes all the rows, obviously because i did not indicate the checked checkbox. So it takes $('table input[type="checkbox"]').parent('td').parent('tr')
as all the rows.
注意:除此之外,我还希望在删除行时自动更新每个复选框旁边的编号.
NOTE: Besides this, I also want the numbering alongside each checkbox to be auto-updated on deleting a row.
我的小提琴: http://jsfiddle.net/3RZWt/1/
推荐答案
我希望单击按钮后删除具有选中复选框的表行.除此之外,我还希望在删除行时自动更新每个复选框旁边的编号.
代码
$(document).ready(function () {
//Set Numbers to span
function AutoNumber() {
$('table tr').each(function (i) {
$(this).find('span').text(i);
});
}
//button slick
$('.deletebtn').click(function () {
$('table tr').each(function (i) {
if($(this).find('input[type="checkbox"]').is(':checked')) {
$(this).closest('tr').remove();
}
});
//After deletion
AutoNumber();
});
//Call to set initially
AutoNumber();
});
HTML ,已将跨度添加到第一个单元格
HTML, Added span to first cell
<tr>
<td>
<input type="checkbox" /><span></span>
</td>
<td> </td>
<td> </td>
</tr>
这篇关于删除行时自动更改编号的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!