JavaScript - добавление новой строки в таблицу с помощью AppendChild () - PullRequest
Новая
       22

JavaScript - добавление новой строки в таблицу с помощью AppendChild ()

0 голосов
/ 16 марта 2019

Для контекста, у меня есть связанный CDN Bootstrap, но я не мог скопировать / вставить здесь по какой-то причине.

Когда я запускаю этот код, при первом отправлении создается строка таблицы с 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>

Ответы [ 4 ]

3 голосов
/ 16 марта 2019

Ваша проблема в том, что вы добавляете к <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);
0 голосов
/ 16 марта 2019

В вашем коде есть несколько проблем, таких как форматирование, неполные теги 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>

Надеюсь, это поможет вам

0 голосов
/ 16 марта 2019

В вашем коде было несколько ошибок, поэтому я прокомментировал строку, которая была ошибкой. Вам также не хватало открывающего тега <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>
0 голосов
/ 16 марта 2019

Вместо 

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

напишите (вы уже добавляете эти тд в строку.) 

masterList.appendChild(row);
...