How to add new row in table from user input in HTML

Question

I just want to build a website. It has a table, that shows data of each row. Basically, this table must be able to add new rows that contain new data, when user click add button.

This is my code:

function myFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
}

table,
td {
  border: 1px solid black;
}

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br>

<button onclick="myFunction()">Try it</button>

But the result of that code is, when user click add button, it always show "NEW CELL 1" and "NEW CELL 2". My question is, how to modify the code, especially:

cell1.innerHTML = "NEW CELL1";
        cell2.innerHTML = "NEW CELL2";

So that, the table is possible to get input data from user?

Step 1: Create some inputs. Step 2 Read up on how to get value from an input element — charlietfl
– charlietfl, Commented Nov 19, 2018 at 18:38

Towkir · Accepted Answer · 2018-11-19 18:38:11Z

4

Simply take your input value and set it as the html value for the target cells

function myFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = document.getElementById('cellOne').value;
  cell2.innerHTML = document.getElementById('cellTwo').value;
}

table,
td {
  border: 1px solid black;
}

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br>

<input type='text' id='cellOne' />
<input type='text' id='cellTwo' />

<button onclick="myFunction()">Try it</button>

answered Nov 19, 2018 at 18:38

Towkir

4,0142 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Agnes Palit Over a year ago

hi, thank you for the answer, however i have another code version, that i really curious how to solve that, can you help me? i want to post in new post, but i realize i can't create same title @Towkir Ahmed

Towkir Over a year ago

you can create a different question if that is a different problem, you can comment the link here. but if it's about same problem, it might be marked as duplicate by moderators.

Stuart · Accepted Answer · 2018-11-19 18:38:49Z

You need some form inputs to allow you to enter text, here is a very basic example to get you started:

function myFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = document.querySelector('#newCellOneText').value;
  cell2.innerHTML = document.querySelector('#newCellTwoText').value;
}

table,
td {
  border: 1px solid black;
}

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br>

Cell 1 Text: <input type="text" id="newCellOneText" /><br/>
Cell 2 Text: <input type="text" id="newCellTwoText" /><br/>
<button onclick="myFunction()">Try it</button>

Collectives™ on Stack Overflow

How to add new row in table from user input in HTML

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related