CODEWITHSUNDEEP
javascriptformsinputhtml-tablebootstrap-4
Cdrew92
Cdrew92

Reputation: 57

JavaScript - Add New Row to Table Using AppendChild()

For context, I have the Bootstrap CDN linked, but i could not copy/paste here for some reason.

When I am running this code, the first submit creates a table row with the id='masterTable', but every time I click submit afterwards the program just writes onto the same table row instead of creating a new one.

I would like to create a new table row each time submit is clicked, but I am stumped here. Any ideas?

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

Upvotes: 1

Views: 4581

Answers (4)

JSONaLeo
JSONaLeo

Reputation: 416

Your code has a few problems, such as formatting, incomplete html tags, and the order of dom manipulation methods, but I'm able to see what you were getting at.

I tried to reproduce a solution using something as close as I could to the code you provided. It creates a new table row of data from each of the inputs using vanilla JS when the button is clicked.

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>

I hope this helps you out

Upvotes: 0

lacostenycoder
lacostenycoder

Reputation: 11226

You had some bugs in your code so I commented out the line that was a bug. You were also missing an opening <table> tag so that's added here. But otherwise this answer is the complete version of @Lab Lab 's answer

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

Upvotes: 0

Lab Lab
Lab Lab

Reputation: 801

Your problem is you are adding to <tbody> element <td> without <tr>. And I suggest you to create a simple string of your html-code instead of adding so many variables like this:

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

Upvotes: 4

Santanu
Santanu

Reputation: 420

Instead of 

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

write (you are already adding those td to row.) 

masterList.appendChild(row);

Upvotes: 0

Related Questions