資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
服裝研究
法律研究如何使用 JavaScript 刪除 HTML 表格中的列？
在 HTML 中，表格用於以格式化的方式在網頁上顯示資料。表格包含列和行來顯示資料。
有時，開發者需要刪除表格列或允許使用者刪除它們。例如，表格包含使用者資料並具有“年齡”和“出生日期”列。在這種情況下，我們需要刪除“年齡”列，因為我們可以從“出生日期”列獲取年齡。
開發者可以使用 deleteCell() 方法刪除任何特定列。在本教程中，我們將學習按索引、類名和列名刪除表格列。此外，開發者應記住，表格列是基於零的索引。
語法
使用者可以按照以下語法使用 deleteCell() 方法刪除表格的任何特定列。
for (var i = 0; i < rowCount; i++) {
table.rows[i].deleteCell(index);
}
在上面的語法中，我們迭代每一行表格並從“索引”中刪除單元格。“索引”是要刪除的列的索引。
示例 1（按索引刪除表格列）
在下面的示例中，我們建立了一個包含數字單詞的表格。我們還透過在 CSS 中新增邊框來設定表格樣式。每當使用者單擊按鈕時，我們都會執行 deleteColumn() 函式。
在 deleteColumn() 函式中，我們使用 id 訪問表格。我們還使用“rows”屬性獲取表格的所有行，並使用陣列的“length”屬性計算行的總數。
我們將“index”變數初始化為 2 以刪除第三列。之後，我們使用 for 迴圈迭代表格的所有行。我們使用 deleteCell() 方法從每一行刪除第三個單元格。
在輸出中，使用者可以單擊按鈕刪除表格中的第三列。
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<h3> Using the <i> deleteCell() method </i> to delete the table columns using JavaScript </h3>
<table id = "test">
<tr>
<th> First </th>
<th> Second </th>
<th> Third </th>
<th> Fourth </th>
</tr>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
</tr>
<tr>
<td> 5 </td>
<td> 6 </td>
<td> 7 </td>
<td> 8 </td>
</tr>
<tr>
<td> 9 </td>
<td> 10 </td>
<td> 11 </td>
<td> 12 </td>
</tr>
</table>
<br> <br>
<button onclick = "deleteColumn()"> Delete Column </button>
<script>
function deleteColumn() {
var table = document.getElementById("test");
var rowCount = table.rows.length;
let index = 2;
for (var i = 0; i < rowCount; i++) {
table.rows[i].deleteCell(index);
}
}
</script>
</html>
示例 2（按標題文字刪除表格列）
在下面的示例中，我們建立了一個包含食品資料的表格。在這個示例中，我們使用標題文字刪除表格列。
在 deleteColum() 函式中，我們訪問表格的表頭。之後，我們訪問所有表頭行。接下來，我們遍歷表頭行並查詢包含“卡路里”作為內部 HTML 的表頭的索引。
找到列索引後，我們可以使用 for 迴圈和 tableCell() 方法刪除每一行中的特定單元格，就像我們在第一個示例中所做的那樣。
在輸出中，使用者應單擊按鈕刪除“卡路里”列。
<html>
<head>
<style>
table {border-collapse: collapse;}
td, th {border: 1px solid black; padding: 8px; }
</style>
</head>
<body>
<h3>Using the <i>deleteCell() method</i> to delete the table columns using JavaScript </h3>
<table id="food">
<tr>
<th>Food Name</th>
<th>Price</th>
<th>Calories</th>
</tr>
<tr>
<td>Apple</td>
<td>99</td>
<td>95</td>
</tr>
<tr>
<td>Banana</td>
<td>89</td>
<td>105</td>
</tr>
<tr>
<td>Orange</td>
<td>79</td>
<td>85</td>
</tr>
</table>
<br> <br>
<script>
function deleteColumn() {
// get a table
var table = document.getElementById('food');
// get header row
var headerRow = table.getElementsByTagName('tr')[0];
// get headers
var headers = headerRow.getElementsByTagName('th');
// find column index
for (var i = 0; i < headers.length; i++) {
if (headers[i].innerHTML === "Calories") {
var columnIndex = i;
break;
}
}
// use column index to delete cells
if (columnIndex !== undefined) {
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
table.rows[i].deleteCell(columnIndex);
}
}
}
</script>
<button onclick="deleteColumn()">Delete Column</button>
</body>
</html>
示例 3（按類名刪除多個表格列）
在下面的示例中，我們將學習如何使用類名刪除表格的多個列。
在這裡，我們首先訪問表格的所有行，並使用 for 迴圈遍歷它們。之後，我們訪問包含“extra”類名的特定行的所有單元格。我們使用 while 迴圈遍歷所有單元格，並使用“cells[0].parentNode.removeChild(cells[0])”逐個刪除所有單元格。
在上面的程式碼中，cell[0] 是當前單元格。“parentNode”指的是它的行，“removeChild()”方法從該行中刪除子節點。
在輸出中，使用者可以單擊按鈕刪除表格中的多個列。
<html>
<head>
<style>
table { border-collapse: collapse;}
td, th {border: 1px solid black; padding: 8px;}
</style>
</head>
<body>
<h3> Using the <i> deleteCell() method </i> to delete the table columns using JavaScript </h3>
<table id = "HTMLtable">
<tr>
<th> Column 1 </th>
<th class = "extra"> Column 2 </th>
<th >Column 3 </th>
<th class = "extra"> Column 4 </th>
</tr>
<tr>
<td> Row 1, Column 1 </td>
<td class = "extra"> Row 1, Column 2 </td>
<td> Row 1, Column 3 </td>
<td class = "extra"> Row 1, Column 4 </td>
</tr>
<tr>
<td> Row 2, Column 1 </td>
<td class = "extra"> Row 2, Column 2 </td>
<td> Row 2, Column 3 </td>
<td class = "extra"> Row 2, Column 4 </td>
</tr>
<tr>
<td> Row 3, Column 1 </td>
<td class = "extra"> Row 3, Column 2 </td>
<td> Row 3, Column 3 </td>
<td class = "extra"> Row 3, Column 4 </td>
</table> <br> <br>
<button onclick="deleteColumn()"> Delete Column </button>
<script>
function deleteColumn() {
var table = document.getElementById('HTMLtable');
var rows = table.getElementsByTagName('tr');
// iterate through rows
for (var i = 0; i < rows.length; i++) {
// get cells with className 'extra'
var cells = rows[i].getElementsByClassName('extra');
// delete cells
while (cells.length > 0) {
cells[0].parentNode.removeChild(cells[0]);
}
}
}
</script>
</html>
我們學習瞭如何使用 JavaScript 刪除表格中的列。我們在前兩個示例中使用 deleteCeil() 方法並將列索引作為引數傳遞。在第三個示例中，我們使用 removeChild() 方法刪除特定單元格。
3K+ 次檢視
