在Web開發(fā)中，表格是不可少的元素之一。在JavaScript中，我們可以通過(guò)操作DOM來(lái)對(duì)表格進(jìn)行動(dòng)態(tài)修改，包括添加、修改和刪除表格內(nèi)容。下面將分別介紹這三個(gè)操作。

1. 添加表格內(nèi)容

//創(chuàng)建新的<tr>元素，并設(shè)置其中的<td>元素內(nèi)容
var newRow = document.createElement("tr");
newRow.innerHTML = "<td>John</td><td>Doe</td><td>25</td>";
//找到表格，并將新<tr>元素添加到其中
var table = document.getElementById("myTable");
table.appendChild(newRow);

以上代碼創(chuàng)建了一個(gè)新的元素，并設(shè)置其中的元素的內(nèi)容，然后在頁(yè)面中找到表格元素，并將新的元素添加到其中。

2. 修改表格內(nèi)容

//找到要修改的元素，并將其內(nèi)容修改
var table = document.getElementById("myTable");
table.rows[1].cells[0].innerHTML = "Bob";
table.rows[1].cells[1].innerHTML = "Smith";
table.rows[1].cells[2].innerHTML = "30";

以上代碼找到了第二行第一列的元素，并將其內(nèi)容修改為"Bob"，同理將第二行的其他元素也修改了內(nèi)容。

3. 刪除表格內(nèi)容

//找到要?jiǎng)h除的元素，并將其從表格中刪除
var table = document.getElementById("myTable");
table.deleteRow(1);

以上代碼找到了第二行的元素，并將其從表格中刪除。

除了上述操作之外，還可以通過(guò)JavaScript添加一些動(dòng)態(tài)效果，例如：鼠標(biāo)移動(dòng)到表格某行時(shí)，改變?cè)撔械谋尘吧取?/p>

//找到要添加效果的元素，并為其添加鼠標(biāo)移動(dòng)事件
var table = document.getElementById("myTable");
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].onmouseover = function() {
this.style.backgroundColor = "#ccc";
};
table.rows[i].onmouseout = function() {
this.style.backgroundColor = "";
};
}

以上代碼為表格的每一行元素添加了鼠標(biāo)移動(dòng)事件。當(dāng)鼠標(biāo)移動(dòng)到某一行時(shí)，該行的背景色會(huì)變?yōu)榛疑?dāng)鼠標(biāo)移出該行時(shí)，則會(huì)恢復(fù)原來(lái)的背景色。

總之，在JavaScript中對(duì)表格進(jìn)行修改和添加動(dòng)態(tài)效果都非常方便。只需操作DOM即可輕松實(shí)現(xiàn)。