JQuery是一個(gè)流行的JavaScript庫,可以幫助開發(fā)人員編寫更簡潔、更高效的JavaScript代碼。其中一個(gè)功能是添加表格,下面我們來看看如何使用JQuery添加表格。
$(document).ready(function() {
// 創(chuàng)建一個(gè)新的表格元素
var table = $("
");
// 添加表頭行
var headerRow = $("
|
");
// 添加表頭列
$("
| ").html("姓名").appendTo(headerRow);
$("
| ").html("年齡").appendTo(headerRow);
// 將表頭行添加到表格中
table.append(headerRow);
// 添加表格內(nèi)容行
var contentRow1 = $("
|
");
$("
| ").html("張三").appendTo(contentRow1);
$("
| ").html(20).appendTo(contentRow1);
// 將內(nèi)容行1添加到表格中
table.append(contentRow1);
// 添加表格內(nèi)容行
var contentRow2 = $("
|
");
$("
| ").html("李四").appendTo(contentRow2);
$("
| ").html(25).appendTo(contentRow2);
// 將內(nèi)容行2添加到表格中
table.append(contentRow2);
// 在HTML頁面中添加表格
$("#myTable").append(table);
});
以上代碼通過JQuery創(chuàng)建了一個(gè)新的表格元素,并添加了表頭行和表頭列,然后向表格中添加了兩行內(nèi)容,分別包括姓名和年齡。最后將表格添加到HTML頁面中的
中。
通過使用JQuery添加表格,可以輕松地創(chuàng)建和管理表格內(nèi)容,同時(shí)代碼更簡潔高效。