[英]Numbering dynamic table rows
我正在使用 jQuery 制作动态 HTML 表。 在一个表中,我的用户有两个交互:
对行进行编号的问题在于,如果用户删除特定行,则该行之后的所有行都需要重新编号。 我必须选择删除行之后的所有行并将它们的数字减去 1。
有没有更好的方法来解决这个问题?
编辑:这是一个演示问题的 JSFiddle: http : //jsfiddle.net/LNXae/2/
我知道有序列表会自动对我的行重新编号,但我更愿意使用表格,因为我现在给出的示例非常简单。
http://jsfiddle.net/mblase75/LNXae/1/
首先,将计数器编号用一个类包裹在<span>
,以便以后查找:
$new_row.children('td').prepend('Row #<span class="num">' + ($new_row.index() + 1) + "</span>");
然后在删除所需的行后使用.each
循环更新所有这些跨度。 传递给.each
回调函数的第一个参数是一个从零开始的索引号,第二个参数是 HTML 元素:
var $row = $(this).closest('tr'),
$table = $row.closest('table');
$row.remove();
$table.find('tr').each(function(i, v) {
$(v).find('span.num').text(i + 1);
});
在用户添加一行或删除一行后,您只需要遍历“数字”单元格。 如果我们假设您有一个<td>
元素,我们:
1) 给他们一个不错的 ID,例如row_0
、 row_1
等...
2)编写一个函数来迭代它们:
function updateRows(){
$('[id*="row_"]').each(function(index){
$(this).html(index + 1); // add +1 to prevent 0 index.
};
};
我已经编写了一个 jquery 插件,它完全可以做到这一点,你不应该需要对行本身进行“编号”。 删除行时您需要做的就是传递被删除行的索引。
例如,如果您在一行中有一个删除按钮:
<table>
<tr>
<td> <input type="button" class="delete" value="delete this row" /></td>
</tr>
</table>
jQuery 可能看起来像
$('.delete').click(function(){
var index = $(this).parents('tr').index();
// tell your plugin to delete row "index"
});
我的插件中执行此操作的方法如下所示:
removeRow: function (index) {
return this.each(function () {
var $this = $(this);
var $tbody = $('tbody', $this);
var $tr = $('tr', $tbody).eq(index);
$this.trigger('rowRemoved', [$tr]);
$tr.remove();
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.