Creating an Additional Table Row Dynamically with JavaScript's AppendChild() Method

Question

Creating an Additional Table Row Dynamically with JavaScript's AppendChild() Method

Just to provide some background, the Bootstrap CDN is connected in my code, but unfortunately I can't paste it here at the moment.

As I run this script, the initial submission successfully generates a table row with the id='masterTable'. However, upon subsequent submissions, the content just gets appended to the same row instead of creating a new one.

I'm trying to figure out how to make a new table row every time the submit button is clicked, but I seem to be stuck. Any suggestions?

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

Answer 1

Answer №1

The issue lies in your code where you are appending a <td> element to a <tbody> without a <tr>. I recommend simplifying your html-code by creating a basic string instead of using multiple 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);

Answer 2

The issue lies in your code where you are appending a <td> element to a <tbody> without a <tr>. I recommend simplifying your html-code by creating a basic string instead of using multiple 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);

Answer 3

Answer №2

Try using

masterList.appendChild(row);

rather than

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

Answer 4

Try using

masterList.appendChild(row);

rather than

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

Answer 5

Answer №3

There were a few bugs found in the code, so I took the liberty of commenting out the problematic line. Additionally, I noticed that an opening <table> tag was missing, so I added it back in here. Other than those adjustments, this answer represents the complete version of @Lab Lab's original response.

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

There were a few bugs found in the code, so I took the liberty of commenting out the problematic line. Additionally, I noticed that an opening <table> tag was missing, so I added it back in here. Other than those adjustments, this answer represents the complete version of @Lab Lab's original response.

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

Answer №4

Your code seems to have a few issues like formatting errors, incomplete html tags, and the order of dom manipulation methods. However, I can understand what you were trying to achieve.

In an attempt to replicate a solution similar to the code you provided, I created a new table row of data from each input using vanilla JS when the button is clicked.

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

function addLocation() {
  // fetch information
  const userOpts = document.getElementById('ddlViewBy');
  const user = userOpts.options[userOpts.selectedIndex].value;
  const htruck = document.getElementById('handtrucks').value;
  const fpad = document.getElementById('furniture').value;
  // create a table row
  const row = document.createElement('tr');
  // create table data cells
  const userTd = document.createElement('td');
  const htruckTd = document.createElement('td');
  const fpadTd = document.createElement('td');
  // insert input data into table cells
  userTd.innerText = user;
  htruckTd.innerText = htruck;
  fpadTd.innerText = fpad;
  // append cells to the row
  row.appendChild(userTd);
  row.appendChild(htruckTd);
  row.appendChild(fpadTd);
  // add the new row to the master table
  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 explanation clarifies things for you

Answer 8

Your code seems to have a few issues like formatting errors, incomplete html tags, and the order of dom manipulation methods. However, I can understand what you were trying to achieve.

In an attempt to replicate a solution similar to the code you provided, I created a new table row of data from each input using vanilla JS when the button is clicked.

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

function addLocation() {
  // fetch information
  const userOpts = document.getElementById('ddlViewBy');
  const user = userOpts.options[userOpts.selectedIndex].value;
  const htruck = document.getElementById('handtrucks').value;
  const fpad = document.getElementById('furniture').value;
  // create a table row
  const row = document.createElement('tr');
  // create table data cells
  const userTd = document.createElement('td');
  const htruckTd = document.createElement('td');
  const fpadTd = document.createElement('td');
  // insert input data into table cells
  userTd.innerText = user;
  htruckTd.innerText = htruck;
  fpadTd.innerText = fpad;
  // append cells to the row
  row.appendChild(userTd);
  row.appendChild(htruckTd);
  row.appendChild(fpadTd);
  // add the new row to the master table
  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 explanation clarifies things for you

Creating an Additional Table Row Dynamically with JavaScript's AppendChild() Method

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Express API is throwing an error because it cannot access the property 'count' of an undefined value

the speed of accessing an array in JavaScript

I have successfully integrated my custom external JavaScript code with React Router, and everything is working

How can I retrieve the contents of input fields and showcase them in a dialog box?

Attempting to embed Text components within another Text component, each with distinct font styles. Unfortunately, in one instance, the line height is causing certain text to be clipped

Is there a way to align all the values in the center of the row, while ensuring that the div above the row does not have the same width as the row below it? If so, how

Using vue.js to pass route parameters to a component

Having trouble accessing the dashboard after uploading a document to Firestore

Tips for making a rounded bottom image slider with react-native?

WebVTT captions on a Chromecast receiver as the default option

Running an Express middleware function

The event handler for clicking on the inner <li> element is not being triggered

The looping mechanism in Angular is not being updated because of how the $mdDialog from Material Design is being implemented

How can JavaScript be used to populate a textbox value from a URL parameter?

Including code that is tailored specifically for the Internet Explorer browser on Windows Phone devices

Looking for the quickest hash and salt method for IP addresses in Node.JS?

It's possible for anyone to enhance the appearance of the Download button by adding styles without compromising its functionality

CKEditor not functioning properly when generated using AJAX and PHP in JavaScript file

Using cleave.js as a field in Formik: A step-by-step guide

Tips for ensuring an element stays anchored at the bottom even when the keyboard is displayed