使用 JavaScript 在 table 之后创建空白和 editable 列

Question

我已经使用 JavaScript 成功创建了动态 table。现在我想在 table 中的 header 6 列之后添加一个空白列和 editable 给用户，默认名称为 header。

我不知道该怎么做。

var passedArray = [
  ["header_1", "header_2", "header_3", "header_4", "header_5", "header_6"],
  ["dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg"],
  ["fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg"],
  ["sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs"],
  ["dsgfd", "dsgfd", "dsgfd", "dsgfd", "dsgfd", "dsgfd"]
];
var html = "<table id = both_table>";
passedArray[0].forEach(function(key) {
  let newVal = key.replace(/_/g, ' ').toUpperCase();
  html += "<th>" + newVal + "</th>";
});
passedArray = passedArray.slice(1, );
passedArray.forEach(function(row) {
  html += "<tr>";
  Object.keys(row).forEach(function(key) {
    html += "<td>" + row[key] + "</td>";
  });
  html += "</tr>";
});
html += "</table>";

normalizedDataTable.innerHTML = html;

#both_table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 3rem;
  text-align-last: center;
}

#both_table td,
#both_tableth {
  border: 1px solid #ddd;
  padding: 8px;
}

#both_table tr:hover {
  background-color: #ddd;
}

#both_table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4caf50;
  color: white;
}

<div class="normalized_data_table" id="normalizedDataTable"></div>

提前致谢

Answer 1

您应该将 table 包裹在 <form> 中，然后在每一行中添加一个 <input type="text"/>：

var passedArray = [
  ["header_1", "header_2", "header_3", "header_4", "header_5", "header_6"],
  ["dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg", "dsgdsfg"],
  ["fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg", "fsgdfg"],
  ["sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs", "sdgsdgfs"],
  ["dsgfd", "dsgfd", "dsgfd", "dsgfd", "dsgfd", "dsgfd"]
];

// wrap the table in a form
var html = "<form action='test.html'>"

html += "<table id = both_table>";

passedArray[0].forEach(function(key) {
  let newVal = key.replace(/_/g, ' ').toUpperCase();
  html += "<th>" + newVal + "</th>";
});

// add an header for your last column
html += "<th>Edit</th>"

passedArray = passedArray.slice(1, );
passedArray.forEach(function(row) {
  html += "<tr>";
  Object.keys(row).forEach(function(key) {
    html += "<td>" + row[key] + "</td>";
  });
  
  // create an input field in each row
  html += "<td><input type='text'/></td>"
  
  html += "</tr>";
});
html += "</table>";

// create the submit button
html += "<button type='submit'>Submit form</button>";

// close the form
html += "</form>";

normalizedDataTable.innerHTML = html;

#both_table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 3rem;
  text-align-last: center;
}

#both_table td,
#both_tableth {
  border: 1px solid #ddd;
  padding: 8px;
}

#both_table tr:hover {
  background-color: #ddd;
}

#both_table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4caf50;
  color: white;
}

<div class="normalized_data_table" id="normalizedDataTable"></div>

另见 JSFiddle。

使用 JavaScript 在 table 之后创建空白和 editable 列

Create blank and editable column after table using JavaScript

html

javascript

css

jquery

html-table