在Web開發中,經常需要在表格中動態添加行,使用jQuery可以輕松實現這個功能。
//假設我們有一個表格,id為"myTable"姓名 年齡 性別 張三 18 男 李四 20 女
//通過以下代碼,可以在表格中動態添加行
$(document).ready(function(){
//找到表格的tbody
var tbody = $("#myTable tbody");
//創建一個新的行
var newRow = $(" ");
//向新行中添加列
$(newRow).append("王五 ");
$(newRow).append("22 ");
$(newRow).append("男 ");
//將新行插入到表格中
$(tbody).append(newRow);
});
以上代碼會在已有的表格中添加一行,包括三列:姓名、年齡、性別。
如果要動態添加多行,可以使用循環,每次循環創建一個新行,最后將所有新行插入到表格中。
$(document).ready(function(){
//找到表格的tbody
var tbody = $("#myTable tbody");
//創建一個新的行數組
var newRows = [];
for(var i=0; i<3; i++){
//創建一個新的行
var newRow = $(" ");
//向新行中添加列
$(newRow).append("姓名"+i+" ");
$(newRow).append("年齡"+i+" ");
$(newRow).append("性別"+i+" ");
//將新行添加到行數組中
newRows.push(newRow);
}
//將所有新行插入到表格中
$(tbody).append(newRows);
});
以上代碼會在已有的表格中添加三行,姓名、年齡和性別會根據循環變量的不同而不同。
上一篇css 合并重復邊框