在實際開發中,我們經常需要使用表格展示數據,而對于一些需要進行排序或分頁的表格,序號自增功能顯得尤為重要。在使用jQuery實現表格序號自增功能時,可以通過以下代碼實現:
$(function(){ var rownumber = 1; //定義初始行號 $('table tr:not(:first)').each(function(){ //排除表頭行 $(this).find('td:first').html(rownumber++); //序號逐一自增 }); });
以上代碼使用了jQuery的each方法,循環遍歷表格中除表頭外的每一行,并通過find方法查找該行第一個單元格,即序號所在單元格,再使用html方法將行號插入其中。通過定義初始行號并逐一自增實現了表格序號的自增功能。
需要注意的是,在表格中插入一行后,序號會失效,因此需要再次執行以上代碼以及時更新序號,或者在插入新行時調用添加行序號的方法:
function addRow(){ var newRow = "<tr><td></td><td></td><td></td></tr>"; $('table tbody').append(newRow); updateRowNumber(); //更新序號 } function updateRowNumber(){ var rownumber = 1; $('table tr:not(:first)').each(function(){ $(this).find('td:first').html(rownumber++); }); }
以上代碼中的addRow方法用于向表格中添加一行,添加完成后調用updateRowNumber方法以重新生成序號,從而保證表格中的序號是連續遞增的。
上一篇div img拉伸