CODEWITHSUNDEEP
javascripthtmlhtml-table
cyber-security47
cyber-security47

Reputation: 29

Append data to html table

I'm trying to add more data to the table below using JavaScript.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Home Page</title>
    <script type="text/javascript" src="assets/style.js"></script>
  </head>
  <body>

      <br><br><br><br><br>

      <input type="text" id="personName" autofocus>
      <button type="button" onclick="addData();">Append Information</button>   <br><br><br><br><br>

      <table>
        <tr>
          <th>Client Name</th>
        </tr>


          <tr>
            <td>James Bond 007</td>
          </tr>

          <div id="addDataHere">

          </div>

      </table>
  </body>
</html>

style.js Used is below:

function addData(){
  var personName = document.getElementById("personName").value;
  //console.log(personName);

  var getOlderInformation = document.getElementById("addDataHere").innerHTML;

  document.getElementById("addDataHere").innerHTML = getOlderInformation + "<tr><td>" + personName + "</tr></td>";



}

Expected Output Results:

Client Names
James Bond 007
Tom Cruise
............
............
............
............

Upvotes: 1

Views: 18274

Answers (4)

benvc
benvc

Reputation: 15120

You can use an approach similar to what you are attempting: getting the innerHTML, appending some new html, and then replacing the innerHTML. But, you need to get the innerHTML of your table (not the element you nested inside of it).

For example (replaced your button onclick with an event listener).

const personName = document.getElementById('personName');
const appendButton = document.getElementById('appendButton');
const nameTable = document.getElementById('nameTable');
appendButton.addEventListener('click', (event) => {
  let content = nameTable.innerHTML;
  content += '<tr><td>' + personName.value + '</td></tr>';
  nameTable.innerHTML = content;
});
<input type="text" id="personName" autofocus>
<button type="button" id="appendButton">Append Information</button>
<table id="nameTable">
  <tr>
    <th>Client Name</th>
  </tr>
  <tr>
    <td>James Bond 007</td>
  </tr>
</table>

Depending on the complexity of what you are doing, it may be faster to go the createElement / appendChild route suggested in the other answers if you also use use createDocumentFragment. Another example:

appendButton.addEventListener('click', (event) => {
  const frag = document.createDocumentFragment();
  const tr = document.createElement('tr');
  const td = document.createElement('td');
  td.appendChild(document.createTextNode(personName.value));
  tr.appendChild(td);
  frag.appendChild(tr);
  nameTable.appendChild(frag);
});
<input type="text" id="personName" autofocus>
<button type="button" id="appendButton">Append Information</button>
<table id="nameTable">
  <tr>
    <th>Client Name</th>
  </tr>
  <tr>
    <td>James Bond 007</td>
  </tr>
</table>

Upvotes: 1

AbdElzaher
AbdElzaher

Reputation: 134

you can use a list to match what you need here's the code 

    <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Home Page</title>

</head>
<body>
  <input type="text" id="personName" autofocus>
  <button type="button" onclick="addData();">Append Information</button> 
    <p>Client Name</p>
  <ul id="mylist">
        <li>James Bond 007</li>
    </ul>


    <script type="text/javascript" src="main.js"></script>
</body>
</html>

and the use adddata() function code like this `function addData(){

    var mylist=document.getElementById("mylist");
    var personName=document.getElementById("personName").value;
    var node = document.createElement("LI");
    var textnode = document.createTextNode(personName);
    node.appendChild(textnode);
    mylist.appendChild(node);
}`

I hope this helps you :)

Upvotes: 1

Nate Anderson
Nate Anderson

Reputation: 690

This should get you started. 

function addData() {
    var personName = document.getElementById("personName").value;
    var newRow = document.createElement("tr");
    var newCell = document.createElement("td");
    newCell.innerHTML = personName;
    newRow.append(newCell);
    document.getElementById("rows").appendChild(newRow);
    document.getElementById("personName").value = '';
}
    <input type="text" id="personName" autofocus>
    <button type="button" onclick="addData();">Append Information</button> <br><br><br><br><br>

    <table>
        <tr>
            <th>Client Name</th>
        </tr>
        <tbody id="rows">
            <tr>
                <td>James Bond 007</td>
            </tr>
        </tbody>
    </table>

You were on the correct path, but an important note is that you were trying to use a div inside of a table. A table has very specific structure that has to be matched if you want it to render properly.

You are able to put div elements inside of a td or a th, but not inside of the table element itself. Check out this link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

Upvotes: 4

Simon Curtis
Simon Curtis

Reputation: 457

You want to use appendchild. Check this out for some Good examples https://www.w3schools.com/jsref/met_node_appendchild.asp . You want to loop through the data adding a row to a table , one row at a time

Upvotes: 0

Related Questions