使用JavaScript動態(tài)添加表格行 在進(jìn)行網(wǎng)站開發(fā)時，經(jīng)常需要對表格進(jìn)行操作，其中動態(tài)添加表格行是比較常見的一種操作。JavaScript可以幫助我們輕松實現(xiàn)這個功能，下面就一起看看如何使用JavaScript動態(tài)添加表格行。 首先，我們需要在HTML中創(chuàng)建一個表格和一個按鈕，用于添加表格行。代碼如下所示：

<table id="mytable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody id="mytablebody">
<tr>
<td>John</td>
<td>25</td>
<td>Male</td>
</tr>
</tbody>
</table>
<button id="addrow">Add Row</button>

在這段代碼中，我們創(chuàng)建了一個表格，并為tbody元素定義了一個ID，用于在JavaScript中操作表格行。我們還創(chuàng)建了一個按鈕，用于在表格中添加新行。 接下來，我們在JavaScript代碼中定義一個函數(shù)，用于在點擊按鈕時添加新行。代碼如下所示：

function addRow() {
var table = document.getElementById("mytable");
var tbody = document.getElementById("mytablebody");
var newRow = tbody.insertRow();
var nameCell = newRow.insertCell();
var ageCell = newRow.insertCell();
var genderCell = newRow.insertCell();
nameCell.innerHTML = "Jane";
ageCell.innerHTML = "30";
genderCell.innerHTML = "Female";
}

在這個函數(shù)中，我們首先獲取了表格和tbody元素的引用。然后，我們使用insertRow()方法創(chuàng)建了一個新行，并為每個單元格使用insertCell()方法添加了單元格。最后，我們將數(shù)據(jù)插入每個單元格中。 我們可以調(diào)用這個函數(shù)，將其綁定到按鈕的click事件上，以便在點擊按鈕時添加新行。代碼如下所示：

document.getElementById("addrow").onclick = addRow;

現(xiàn)在，我們已經(jīng)實現(xiàn)了動態(tài)添加表格行的功能。當(dāng)我們點擊按鈕時，代碼會自動添加一行Jane、30、Female的數(shù)據(jù)。 總結(jié) 使用JavaScript動態(tài)添加表格行是非常常見的一種網(wǎng)站開發(fā)需求。通過創(chuàng)建一個函數(shù)并與按鈕點擊事件綁定，我們可以輕松地實現(xiàn)這個功能。在代碼中，我們主要使用insertRow()和insertCell()方法以及innerHTML屬性操作表格，代碼邏輯比較簡單。對于初學(xué)者來說，這個功能非常適合練習(xí)JavaScript語法和DOM操作。