格中選定的行
隨著Web應用程式的流行，JavaScript成為一種廣泛使用的程式語言。當然，身為Web開發人員，我們常常需要在Web應用程式中處理資料。刪除表格中的行是其中一個的功能。在本篇文章中，我們將討論如何使用JavaScript刪除表格中選定的行。
步驟1：HTML標記
首先，我們需要一個包含表格的HTML頁面。在HTML中建立一個ID屬性為"table-data"的表格。
<table id="table-data">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>22</td>
<td>Female</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>Male</td>
</tr>
</tbody>
</table>步驟2：JavaScript程式碼
接下來，我們可以使用JavaScript編寫邏輯來刪除表格中選取的行。我們將使用以下步驟：
//获取表格元素
const table = document.getElementById('table-data');
//获取所有表格行
const rows = table.getElementsByTagName('tr');
//保存选定的行
let selected_rows = [];
//将选定的行添加到数组中
function selectRow(row) {
selected_rows.push(row);
}
//将选定的行从数组中移除
function deselectRow(row) {
const index = selected_rows.indexOf(row);
if (index > -1) {
selected_rows.splice(index, 1);
}
}
//在单击表格行时调用
function handleClick(event) {
const row = event.target.parentNode;
if (row.nodeName === 'TR') {
if (row.getAttribute('data-selected') === 'true') {
row.setAttribute('data-selected', 'false');
deselectRow(row);
} else {
row.setAttribute('data-selected', 'true');
selectRow(row);
}
}
}
//为表格行添加单击事件
for (let i = 0; i < rows.length; i++) {
rows[i].addEventListener('click', handleClick, false);
}
//删除选定的行并重新呈现表格
function deleteRows() {
for (let i = 0; i < selected_rows.length; i++) {
const index = selected_rows[i].rowIndex;
table.deleteRow(index);
}
selected_rows = [];
}
//获取删除按钮元素并添加单击事件
const delete_button = document.getElementById('delete-button');
delete_button.addEventListener('click', deleteRows, false);步驟3：讓使用者和應用程式互動
最後，我們需要為使用者提供一個刪除按鈕。我們將使用一個按鈕元素並新增點擊事件。當單擊按鈕時，我們將呼叫deleteRows()函數以刪除選定的行。
<button id="delete-button">Delete Rows</button>
至此，我們已經完成如何使用JavaScript刪除表格中選定的行。我們先取得表格，遍歷所有行元素並為每個行元素新增點擊事件，隨後我們根據使用者的選擇來選擇或取消選擇行。最後使用DOM操作對選取的行進行刪除，完成刪除行的操作。
參考資料：
以上是javascript刪除表的詳細內容。更多資訊請關注PHP中文網其他相關文章！
