Question

对于上下文，我链接了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>

Answer 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);

Answer 2

代替

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

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

masterList.appendChild(row);

Answer 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>

Answer 4

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

我尝试使用与您提供的代码尽可能接近的方式重现解决方案。单击按钮时，它将使用香草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>

希望这对您有所帮助

JavaScript-使用AppendChild（）将新行添加到表

4 个答案: