按钮未在预期位置呈现

Question

我正在单击 HTML 中的一个按钮，并期望根据 for 循环创建一个包含 X 行数量的 table，然后在每行的末尾创建一个按钮。

我希望输出如下所示：

<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

I am expecting the output to look like this

您引用的结构无效。您不能将 button 作为 tr 的直接子代。从 the spec for tr 开始，tr 元素中唯一可以包含的内容是 td、th 或脚本支持元素。

However for some reason the button does not render on the first row:

因为您只创建了一个 button 元素，然后将其附加到两个单独的行。添加它不会克隆它，它将它从它的旧父级（如果有的话）移动到一个新的。

要修复它：

每次需要一个新按钮时创建一个新的 button（使用新的 id；id 值必须在文档中是唯一的）。
将 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;

}

按钮未在预期位置呈现

Button not rendering where expected

html

javascript

html-table

button

createelement