我正在嘗試創建一個表格，其中每個單元格都包含一個字母和一個數字。查看目標表的影像：
這是我正在使用的 HTML 代碼。這是一個簡單的按鈕，單擊時應呼叫該populateTable()函式，然后在頁面上顯示表格。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<style>
table { border-collapse: collapse; margin: 1em 0; }
td { border: 1px solid black; padding: 0.3em; }
</style>
</head>
<body>
<h2>Table</h2>
<table id="the-table"></table>
<button type="button" onclick="populateTable();">Populate table</button>
<script src="table.js"></script>
</body>
</html>
但這里的主要問題是我的 JS 代碼。
function populateTable(){
letters = ["a", "b", "c", "d", "e"]
numbers = ["1", "2", "3", "4", "5"]
for(let i = 0; i < numbers.length; i ){
document.getElementById("the-table").innerHTML = "<tr>"
for(let j = 0; j < letters.length; j ){
document.getElementById("the-table").innerHTML = "<td>" letters[j] numbers[i] "</td>"
}
document.getElementById("the-table").innerHTML = "</tr>"
}
}
內回圈退出后如何創建新的 <tr> ？
當前代碼的結果如下所示
請幫忙:'D
我試著四處走動
document.getElementById("the-table").innerHTML = "<tr>"
和
document.getElementById("the-table").innerHTML = "</tr>"
但無濟于事。我試著在網上尋找答案，但沒有找到對我的案例有用的東西。像 appendChild 這樣的東西并不是我真正想要的。我只想知道為什么上面提到的這些行（“<tr>”）不起作用，解決這個問題的最簡單方法是什么？
uj5u.com熱心網友回復：
您可以使用creatElement而不是撰寫文本。InnerHtml可能是一個有問題的安全明智。如果您好奇，請查看 XSS。
const letters = ["a", "b", "c", "d", "e"]
const numbers = ["1", "2", "3", "4", "5"]
const table = document.getElementById("the-table");
function populateTable() {
for (let i = 0; i < numbers.length; i ) {
const row = document.createElement("tr");
for (let j = 0; j < letters.length; j ) {
const column = document.createElement("td");
column.textContent = letters[j] numbers[i];
row.appendChild(column);
}
table.appendChild(row);
}
}table {
border-collapse: collapse;
margin: 1em 0;
}
td {
border: 1px solid black;
padding: 0.3em;
}<h2>Table</h2>
<table id="the-table"></table>
<button type="button" onclick="populateTable();">Populate table</button>你原來的邏輯很好，但是innerHTML很麻煩。如果您檢查 html，您將看到帶有 innerHtml 的內容：
<table id="the-table"><tbody><tr></tr></tbody><tbody><tr><td>a1</td></tr></tbody><tbody><tr><td>b1</td></tr></tbody><tbody><tr><td>c1</td></tr></tbody><tbody><tr><td>d1</td></tr></tbody><tbody><tr><td>e1</td></tr></tbody><tbody><tr></tr></tbody><tbody><tr><td>a2</td></tr></tbody><tbody><tr><td>b2</td></tr></tbody><tbody><tr><td>c2</td></tr></tbody><tbody><tr><td>d2</td></tr></tbody><tbody><tr><td>e2</td></tr></tbody><tbody><tr></tr></tbody><tbody><tr><td>a3</td></tr></tbody><tbody><tr><td>b3</td></tr></tbody><tbody><tr><td>c3</td></tr></tbody><tbody><tr><td>d3</td></tr></tbody><tbody><tr><td>e3</td></tr></tbody><tbody><tr></tr></tbody><tbody><tr><td>a4</td></tr></tbody><tbody><tr><td>b4</td></tr></tbody><tbody><tr><td>c4</td></tr></tbody><tbody><tr><td>d4</td></tr></tbody><tbody><tr><td>e4</td></tr></tbody><tbody><tr></tr></tbody><tbody><tr><td>a5</td></tr></tbody><tbody><tr><td>b5</td></tr></tbody><tbody><tr><td>c5</td></tr></tbody><tbody><tr><td>d5</td></tr></tbody><tbody><tr><td>e5</td></tr></tbody></table>
如果您真的想使用innerHTML，這里有一個展示如何使用的答案。如果可以，請不要這樣做。題主的一個題目：innerHTML is adding tbody, why？. 他們的建議與我的建議相同“無論如何，你真的不應該用 innerHTML 操作構建一個表。”
uj5u.com熱心網友回復：
這里的問題是，每次您在表格元素上呼叫 = 時，它都會創建一個新的 tbody。所以所有的 TD 都會出現在新的一行上。您需要創建一個變數并創建整個內部表結構，然后像這樣將其添加到您的表中。如果您在運行代碼后檢查元素，您可以看到所有的 tbodies。我希望這有幫助。
應該注意，這不是執行此操作的“正確”方法。我只是為您選擇的方法提供修復，因為這就是人們學習和成長的方式:)
function populateTable(){
letters = ["a", "b", "c", "d", "e"]
numbers = ["1", "2", "3", "4", "5"]
innerTable = '';
for(let i = 0; i < numbers.length; i ){
innerTable = "<tr>"
for(let j = 0; j < letters.length; j ){
innerTable = "<td>" letters[j] numbers[i] "</td>"
}
innerTable = "</tr>"
}
document.getElementById("the-table").innerHTML = innerTable;
}uj5u.com熱心網友回復：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<style>
table { border-collapse: collapse; margin: 1em 0; }
td { border: 1px solid black; padding: 0.3em; }
</style>
</head>
<body>
<h2>Table</h2>
<table id="the-table"></table>
<button type="button" onclick="populateTable();">Populate table</button>
<script >
function populateTable(){
letters = ["a", "b", "c", "d", "e"]
numbers = ["1", "2", "3", "4", "5"]
let str=""
numbers.map(n=>{
str ="<tr>"
letters.map(l=>{
str =`<td> ${l} ${n} </td>`
})
str ="</tr>"
})
//console.log('str ',str);
document.getElementById("the-table").innerHTML=str;
}
</script>
</body>
</html>通過使用 ES6，您可以使用嵌套映射來迭代陣列。然后在每次迭代后添加到字串中。這是為您新創建的 populateTable()函式。
function populateTable(){
letters = ["a", "b", "c", "d", "e"]
numbers = ["1", "2", "3", "4", "5"]
let str=""
numbers.map(n=>{
str ="<tr>"
letters.map(l=>{
str =`<td> ${l} ${n} </td>`
})
str ="</tr>"
})
console.log('str ',str);
document.getElementById("the-table").innerHTML=str;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/534793.html