How to add list data into table data on one click by using javascript?

Question

I want when someone writes list in textarea and press "Add Values" then the every line list should be added to the first table column(Please refer image). I mean first line data from list should be added to first column line data and so on... I have no idea about how I can do this by JavaScript share me your solutions.

Image

JsFiddle

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
</style>
</head>
<body>
<center>

<textarea rows="10" cols="50">First
Second
Third
Fourth
Fifth
  </textarea><br>
<button onclick="myFunction()">Add Values</button><br><br>


<table id="myTable">
  <tr>
    <th>Sr No</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  
</table>
</center>
</body>

<script>
function myFunction() {
  
}
</script>

</html>

Alizadeh118 · Accepted Answer · 2020-08-24 10:59:05Z

1

function myFunction() {

  const values = document.querySelector('#input')
  .value.trim().split('\n');
  
  const table = document.querySelector('#myTable');
  
  for (const value of values)
    table.innerHTML += `<tr><td>${value}</td><td></td><td></td></tr>`;
  
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}

<center>

<textarea rows="10" cols="50" id="input">First
Second
Third
Fourth
Fifth
</textarea><br>
<button onclick="myFunction()">Add Values</button><br><br>


<table id="myTable">
  <tr>
    <th>Sr No</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>  
</table>
</center>

edited Aug 24, 2020 at 10:59

answered Aug 24, 2020 at 10:52

Alizadeh118

1,08411 silver badges20 bronze badges

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

3 Comments

Jelmer Jellema Over a year ago

This runs out td's when there is more input than TR. Probably better to check for that, or to remove the old tbody and restart creating one with fresh tr td lines.

santosh Over a year ago

But I want my 5 data should be added to first column! Your code adding it into rows

Alizadeh118 Over a year ago

I fixed it, check it now. @santosh

GURU MAHESH K · Accepted Answer · 2020-08-24 11:01:50Z

This function will works

function myFunction() {
     var arrayOfRows = document.getElementById("input").value.split("\n");
     var table = document.getElementById("myTable");
     for (var i = 1, row; row = table.rows[i]; i++) {
         row.cells[0].innerHTML=arrayOfRows[i-1]
      }
 }

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}

<center>

<textarea rows="10" cols="50" id="input">First
Second
Third
Fourth
Fifth
</textarea><br>
<button onclick="myFunction()">Add Values</button><br><br>


<table id="myTable">
  <tr>
    <th>Sr No</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  
</table>
</center>

Collectives™ on Stack Overflow

How to add list data into table data on one click by using javascript?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related