JavaScript - 使用 AppendChild() 向表中添加新行答案

【问题标题】：JavaScript - Add New Row to Table Using AppendChild()JavaScript - 使用 AppendChild() 向表中添加新行
【发布时间】：2019-08-07 12:56:37
【问题描述】：

对于上下文，我已链接 Bootstrap CDN，但由于某种原因我无法在此处复制/粘贴。

当我运行此代码时，第一次提交会创建一个带有id='masterTable' 的表格行，但每次我点击提交之后，程序只会写入同一个表格行，而不是创建一个新行。

我想在每次点击提交时创建一个新的表格行，但我在这里被难住了。有什么想法吗？

<!DOCTYPE html>
<html>
<link>
</link>
<head>
</head>
<body>
<div class="d-flex">

<div>
<select id="ddlViewBy">
<option value="0310">XXXX-10</option>
<option value="4610" selected="selected">XXXX-10</option>
<option value="4610">XXXX-10</option>
</select>
</div>
</div>
<form>
<div class="form-group">
<label>Hand Trucks</label>
<input type="text" class="form-control" id="handtrucks" placeholder="Enter 
number of Hand Trucks.">
</div>
<div>
  <label>Furniture Pads</label>
<input type="text" class="form-control" id="furniture" placeholder="Enter 
number of Furniture Pads.">
</div>
<button type="submit" onClick='addLocation(); return false;' id='button' 
class="btn btn-primary">Submit</button>
</form>
<tbody id='masterTable'>

</tbody>
</table>
</body>

<script>
const button = document.getElementById('button');
const dropdown = document.getElementById('dropdown').value;
const htruck = document.getElementById('handtrucks').value;
const fpad = document.getElementById('furniture').value;


function addLocation() {
let masterList = document.getElementById('masterTable');
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
var handTruck = document.getElementById('handtrucks').value;
var furnPads = document.getElementById('furniture').value;
var row = document.createElement("tr");
var locationEntry = document.createElement('td');
var htEntry = document.createElement('td');
var fpEntry = document.createElement('td');
row.appendChild(locationEntry);
locationEntry.appendChild(document.createTextNode(strUser));
row.appendChild(htEntry);
htEntry.appendChild(document.createTextNode(handTruck));
row.appendChild(fpEntry);
fpEntry.appendChild(document.createTextNode(furnPads));
masterList.appendChild(locationEntry);
masterList.appendChild(htEntry);
masterList.appendChild(fpEntry);
}
</script>
</html>

【问题讨论】：

标签： javascript forms input html-table bootstrap-4

【解决方案1】：

您的问题是您添加到<tbody> 元素<td> 没有<tr>。我建议你创建一个简单的 html 代码字符串，而不是像这样添加这么多变量：

let row = document.createElement('tr');
let html = '<td>' + value + '</td><td>' + value1 + '</td><td>' + value2 + '</td>';
row.innerHTML = html;
masterList.appendChild(row);

【讨论】：

谢谢！此解决方案有效。我在尝试对每个元素使用 appendChild 时有点迷失了。
@Cdrew92，很高兴能帮到你

【解决方案2】：

代替

masterList.appendChild(locationEntry);
masterList.appendChild(htEntry);
masterList.appendChild(fpEntry);

写（您已经将那些 td 添加到行。）

masterList.appendChild(row);

【讨论】：

【解决方案3】：

您的代码中有一些错误，所以我注释掉了错误所在的行。您还缺少一个开头的<table> 标签，所以这里添加了。但除此之外，这个答案是@Lab Lab 答案的完整版本

<!DOCTYPE html>
<html>
<link>
</link>

<head>
</head>

<body>
  <div class="d-flex">

    <div>
      <select id="ddlViewBy">
        <option value="0310">XXXX-10</option>
        <option value="4610" selected="selected">XXXX-10</option>
        <option value="4610">XXXX-10</option>
      </select>
    </div>
  </div>
  <form>
    <div class="form-group">
      <label>Hand Trucks</label>
      <input type="text" class="form-control" id="handtrucks" placeholder="Enter
number of Hand Trucks.">
    </div>
    <div>
      <label>Furniture Pads</label>
      <input type="text" class="form-control" id="furniture" placeholder="Enter
number of Furniture Pads.">
    </div>
    <button type="submit" onClick='addLocation(); return false;' id='button' class="btn btn-primary">Submit</button>
  </form>
  <table>
  <tbody id='masterTable'>

  </tbody>
  </table>
</body>

<script>
  let button = document.getElementById('button');
  // const dropdown = document.getElementById('dropdown').value;
  let htruck = document.getElementById('handtrucks').value;
  let fpad = document.getElementById('furniture').value;
  let masterList = document.getElementById('masterTable');

  function addLocation() {
    var e = document.getElementById("ddlViewBy");
    var strUser = e.options[e.selectedIndex].value;
    var handTruck = document.getElementById('handtrucks').value;
    var furnPads = document.getElementById('furniture').value;
    var row = document.createElement("tr");
    var locationEntry = document.createElement('td');
    var htEntry = document.createElement('td');
    var fpEntry = document.createElement('td');
    row.appendChild(locationEntry);
    locationEntry.appendChild(document.createTextNode(strUser));
    row.appendChild(htEntry);
    htEntry.appendChild(document.createTextNode(handTruck));
    row.appendChild(fpEntry);
    fpEntry.appendChild(document.createTextNode(furnPads));
    masterList.appendChild(row);
  }
</script>

</html>

【讨论】：

【解决方案4】：

您的代码有一些问题，例如格式、不完整的 html 标签和 dom 操作方法的顺序，但我能够看到您的意思。

我尝试使用尽可能接近您提供的代码的方法来重现解决方案。单击按钮时，它会使用 vanilla JS 从每个输入中创建一个新的表格数据行。

document.getElementById('button').addEventListener('click', (e) => {
  e.preventDefault();
  addLocation();
});

function addLocation() {
  // get info
  const userOpts = document.getElementById('ddlViewBy');
  const user = userOpts.options[userOpts.selectedIndex].value;
  const htruck = document.getElementById('handtrucks').value;
  const fpad = document.getElementById('furniture').value;
  // make a table row
  const row = document.createElement('tr');
  // make table data
  const userTd = document.createElement('td');
  const htruckTd = document.createElement('td');
  const fpadTd = document.createElement('td');
  // write input data to table
  userTd.innerText = user;
  htruckTd.innerText = htruck;
  fpadTd.innerText = fpad;
  // stick them to the row
  row.appendChild(userTd);
  row.appendChild(htruckTd);
  row.appendChild(fpadTd);
  // finally put on the master table the new row
  document.getElementById('masterTable').appendChild(row);
};

table, td, tr {
  border: 1px solid black;
  border-collapse: collapse;
}
td {
  padding: 0 3px;
}

<div class="d-flex">

  <div>
    <select id="ddlViewBy">
      <option value="0310">XXXX-10</option>
      <option value="4610" selected>XXXX-10</option>
      <option value="4610">XXXX-10</option>
    </select>
  </div>
</div>
<form>
  <div class="form-group">
    <label>Hand Trucks</label>
    <input type="text" class="form-control" id="handtrucks" placeholder="Enter 
    number of Hand Trucks.">
  </div>
  <div>
     <label>Furniture Pads</label>
    <input type="text" class="form-control" id="furniture" placeholder="Enter 
    number of Furniture Pads.">
  </div>
    <button type="submit" id='button' 
  class="btn btn-primary">Submit</button>
</form>
<table class="tblclass" id='masterTable'>

</table>

希望对你有帮助

【讨论】：