jQuery是前端開發中必不可少的工具,在處理表格的時候同樣也非常常見。下面介紹一個簡單的jQuery表格添加數據的例子。
<table id="myTable">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
</tr>
</thead>
<tbody>
<tr>
<td>數據1-1</td>
<td>數據1-2</td>
</tr>
<tr>
<td>數據2-1</td>
<td>數據2-2</td>
</tr>
</tbody>
</table>
<button id="addDataBtn">添加數據</button>
<script>
$(document).ready(function(){
$('#addDataBtn').click(function(){
var data1 = $('#data1Input').val();
var data2 = $('#data2Input').val();
var newRow = '<tr><td>' + data1 + '</td><td>' + data2 + '</td></tr>';
$('#myTable tbody').append(newRow);
});
});
</script>
上面的示例中有一個表格,包含兩列、兩行的數據。另外還有一個按鈕和兩個文本框,用于添加新的數據。jQuery的click事件會在點擊按鈕時觸發。在事件處理函數中,獲取文本框中的值,拼接一個新的表格行,最后使用append()方法將新的行添加到表格中。
可以看到,在jQuery中使用append()方法非常方便實現表格的動態添加和刪除。