jQuery是一個非常流行的JavaScript庫,可以很方便地操作HTML元素。在jQuery中,我們可以使用表格來呈現(xiàn)數(shù)據(jù)。不僅如此,我們還可以使用jQuery來添加內(nèi)容、樣式和事件。本文將介紹如何使用jQuery添加信息到表格中。
// 創(chuàng)建一個表格 var table = $('<table></table>'); // 創(chuàng)建表頭并添加到表格中 var thead = $('<thead></thead>'); var tr = $('<tr></tr>'); $('<th></th>').text('姓名').appendTo(tr); $('<th></th>').text('年齡').appendTo(tr); $('<th></th>').text('性別').appendTo(tr); tr.appendTo(thead); thead.appendTo(table); // 添加表身信息到表格中 var tbody = $('<tbody></tbody>'); var data = [ { name: '小明', age: 20, sex: '男' }, { name: '小紅', age: 18, sex: '女' }, { name: '小剛', age: 22, sex: '男' } ]; for (var i = 0; i < data.length; i++) { var tr = $('<tr></tr>'); $('<td></td>').text(data[i].name).appendTo(tr); $('<td></td>').text(data[i].age).appendTo(tr); $('<td></td>').text(data[i].sex).appendTo(tr); tr.appendTo(tbody); } tbody.appendTo(table); // 將表格添加到頁面中 table.appendTo($('body'));
上述代碼創(chuàng)建了一個包含表頭和表身的表格,并將其添加到頁面中。如果我們要添加一行數(shù)據(jù)到表格中,只需按照以下步驟:
- 獲取表格的元素
- 創(chuàng)建一行
元素 - 創(chuàng)建并添加單元格
元素 - 將行添加到中
示例代碼如下:
// 獲取tbody元素 var tbody = $('tbody'); // 創(chuàng)建行并添加單元格 var tr = $('<tr></tr>'); $('<td></td>').text('小強').appendTo(tr); $('<td></td>').text(25).appendTo(tr); $('<td></td>').text('男').appendTo(tr); // 將行添加到tbody中 tbody.append(tr);
以上代碼將"小強"
25"男"這一行數(shù)據(jù)添加到表格中。 - 創(chuàng)建一行