按钮未按预期呈现答案

【问题标题】：Button not rendering where expected按钮未按预期呈现
【发布时间】：2017-02-23 13:51:01
【问题描述】：

我在我的 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;
}

【问题讨论】：

标签： javascript html button html-table createelement

【解决方案1】：

我希望输出看起来像这样

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

但是由于某种原因，按钮没有呈现在第一行：

因为您只创建了一个 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"])
);

【讨论】：

【解决方案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;

}

【讨论】：