在本文中，我們將學習如何在 setAttribute API 的幫助下使用 JavaScrip 將 ID 動態插入到表格元素中。
在 Web 開發中，當我們需要唯一地識別和操作特定的行或單元格時，將 ID 動態插入 HTML 表格元素可能是一種有用的技術。透過以程式設計方式將 ID 分配給表格元素，我們在存取和修改表格內容方面獲得了更多控制和靈活性。
讓我們透過一些範例來了解如何實現這一點。
範例 1
在此範例中，我們透過計算可用行總數並將該計數附加到空字串來產生表格行的隨機 ID。
檔名：index.html
<html lang="en">
<head>
<title>How to dynamically insert id into table element using JavaScript?</title>
</head>
<body>
<h3>How to dynamically insert id into table element using JavaScript?</h3>
<table id="myTable">
<tr>
<th>Row</th>
<th>Data</th>
</tr>
</table>
<button onclick="addRow()">Add Row</button>
<script>
function addRow() {
const table = document.getElementById("myTable");
const row = table.insertRow();
const rowId = "" + (table.rows.length - 1); // Generate a unique ID
row.id = rowId; // Set the ID of the row
// Add cells to the new row
const cell1 = row.insertCell(0);
const cell2 = row.insertCell(1);
// Insert content into cells
cell1.innerHTML = "Row " + (table.rows.length - 1);
cell2.innerHTML = "Data " + (table.rows.length - 1);
}
</script>
</body>
</html>
登入後複製
範例 2
在此範例中，我們將遵循上述程式碼模式，並在 classList 方法、classList 物件和資料集物件的 id 屬性的幫助下，使用 3 種不同的方法為表格單元格產生隨機 id。 < /p>
檔名：index.html
<html lang="en">
<head>
<title>
How to dynamically insert id into table element using JavaScript?
</title>
</head>
<body>
<h3>How to dynamically insert id into table element using JavaScript?</h3>
<table id="myTable">
<tr>
<th>Row</th>
<th>Data</th>
</tr>
</table>
<button onclick="addRowUsingObj()">Add Row Using classList object</button>
<button onclick="addRowUsingMethod()">
Add Row Using classList method
</button>
<button onclick="addRowUsingId()">Add Row Using the id property</button>
<script>
const table = document.getElementById("myTable");
function addRowUsingObj() {
// Example 1: Using classList object
const row1 = table.insertRow();
row1.classList.add("custom-row");
// Insert content into cells
const cell1 = row1.insertCell();
const cell2 = row1.insertCell();
cell1.innerHTML = "Row " + (table.rows.length - 1);
cell2.innerHTML = "Data " + (table.rows.length - 1);
}
function addRowUsingMethod() {
// Example 2: Using classList method
const row3 = table.insertRow();
row3.classList.add("row-highlight");
// Insert content into cells
const cell1 = row3.insertCell();
const cell2 = row3.insertCell();
cell1.innerHTML = "Row " + (table.rows.length - 1);
cell2.innerHTML = "Data " + (table.rows.length - 1);
}
function addRowUsingId() {
// Example 3: Using the id property of the dataset object
const row4 = table.insertRow();
const rowId = "row-" + (table.rows.length - 1); // Generate a unique ID
row4.dataset.id = rowId; // Set the ID of the row
// Insert content into cells
const cell1 = row4.insertCell();
const cell2 = row4.insertCell();
cell1.innerHTML = "Row " + (table.rows.length - 1);
cell2.innerHTML = "Data " + (table.rows.length - 1);
// Add more cells and content for the other examples if needed
}
</script>
</body>
</html>
登入後複製
結論
總之，使用 JavaScript 將 ID 動態插入表元素可以實現與表中特定元素的高效操作和互動。在提供的範例中，我們學習如何將 ID 動態插入表格行和儲存格中。透過利用 insertRow、insertCell 等 JavaScript 方法並操作 id 屬性，我們產生了唯一的 ID 並將它們與對應的表格元素相關聯。
以上是如何使用 JavaScript 動態地將 id 插入到表格元素中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
