按钮没有呈现在预期的位置

Question

我点击了HTML中的一个按钮，期望根据for循环创建X行数量的表，然后在每行的末尾添加一个按钮。

我期待输出看起来像这样：

<table> 
<tr> 
    <td> first element </td> 
    <button> </button> 
</tr> 
<tr> 
    <td> first element </td> 
    <button> </button> 
</tr> 
</table> 

但是由于某种原因，该按钮不会在第一行上渲染：

<table> 
    <tr> 
     <td> first element </td> 
    </tr> 
    <tr> 
     <td> first element </td> 
     <button> </button> 
    </tr> 
    </table> 

这是我使用的代码：

function makeHTMLMatchesTable(array){ 
    var table = document.createElement('table'); 
    var button = document.createElement('button'); 
    button.setAttribute("id", "unMatchButton"); 
    console.log(array.length, 'ARRAY'); 
    for (var i = 0; i < array.length; i++) { 
     console.log(array[i], 'ai'); 
     var row = document.createElement('tr'); 
     var cell = document.createElement('td'); 
     cell.textContent = array[i]; 
     row.appendChild(cell); 
     row.appendChild(button); 
     table.appendChild(row); 
    } 
    return table; 
} 

Answer 1

我期待的输出看升ike this

您引用的结构无效。您不能将button作为tr的直接子代。从the spec for tr中，唯一可以在tr元素中的东西是td,th或脚本支持元素。

但是由于某种原因，该按钮不会在第一行上渲染：

因为你只是创建了一个button元素，然后将其添加到两个独立的行。追加它并不克隆它，它将从其父亲（如果有的话）移动到新的父亲。

要解决这个问题：

1. 创建一个新的button你想有一个新的按钮，每一次（用新id; id值必须是文档中唯一的）。

2. 将button附加到td而不是tr。

例子：

function makeHTMLMatchesTable(array) { 
 
    var table = document.createElement('table'); 
 
    for (var i = 0; i < array.length; i++) { 
 
    var row = document.createElement('tr'); 
 
    var cell = document.createElement('td'); 
 
    cell.textContent = array[i]; 
 
    row.appendChild(cell); 
 
    cell = document.createElement('td');    // Second td 
 
    var button = document.createElement('button'); // New button for each 
 
    button.setAttribute("id", "unMatchButton" + i); // Unique id 
 
    cell.appendChild(button);      // Button in cell 
 
    row.appendChild(cell);       // Add second cell 
 
    table.appendChild(row); 
 
    } 
 
    return table; 
 
} 
 
document.body.appendChild(
 
    makeHTMLMatchesTable(["one", "two", "three"]) 
 
);

Answer 2

你需要为每行

function makeHTMLMatchesTable(array){ 
    var table = document.createElement('table'); 
    console.log(array.length, 'ARRAY'); 
    for (var i = 0; i < array.length; i++) { 
    console.log(array[i], 'ai'); 
    var row = document.createElement('tr'); 
    var cell = document.createElement('td'); 
    cell.textContent = array[i]; 
    var button = document.createElement('button'); 
    button.setAttribute("id", "unMatchButton"); 
    row.appendChild(cell); 
    row.appendChild(button); 
    table.appendChild(row); 
} 

return table; 

}