我有這個代碼
<div id="container">
<table>
<tr>
<td>name1</td>
<td>age</td>
</tr>
<tr>
<td>Alex</td>
<td>12</td>
</tr>
</table>
</div>
我想制作許多<tr>標簽及其內容，但我想更改里面的值我該<td>怎么做？我聽說過 cloneNode，但我沒有找到任何有關如何執行此操作的資源
uj5u.com熱心網友回復：
我建議您不要使用簡單的表格，而是像我的示例一樣使用tbodyand thead（tbody空且thead有行），然后使用forEach資料并填寫tbody如下：
const data = [
['test', 10],
['test2', 11],
['test3', 12],
];
const table = document.querySelector('table');
data.forEach(el =>{
table.tBodies[0].innerHTML = `<tr><td>${el[0]}</td><td>${el[1]}</td></tr>`;
});<div id="container">
<!-- empty template -->
<table border="1">
<thead>
<tr>
<td>name1</td>
<td>age</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>邊注：
我不知道你的資料結構，這只是一個例子。
參考：
- Array.prototype.forEach()
- 元素.innerHTML
- HTMLTableElement.tBodies
uj5u.com熱心網友回復：
您可以<template>用于保存不立即呈現但可以在運行時隨后實體化的 HTML 內容。
該<template>元素有一個content屬性 (DocumentFragment)，其中包含模板 DOM 子樹。您可以克隆模板內容，然后修改子樹。
const template = document.getElementById('data-template');
const node = template.content.cloneNode(true);
const td = node.firstElementChild.children;
td[0].textContent = "Jonh";
td[1].textContent = "14";
document.querySelector("table").appendChild(node);<table>
<tr>
<td>name1</td>
<td>age</td>
</tr>
</table>
<template id="data-template">
<tr>
<td>Alex</td>
<td>12</td>
</tr>
</template>見 html 模板
uj5u.com熱心網友回復：
使用淘汰賽js。這很簡單。您甚至可以在表格中包含欄位并跟蹤更改等。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/434099.html
標籤：javascript 克隆节点