CODEWITHSUNDEEP
javascripthtml
santosh
santosh

Reputation: 892

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

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>

Upvotes: 0

Views: 900

Answers (2)

GURU MAHESH K
GURU MAHESH K

Reputation: 66

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>

Upvotes: 0

Alizadeh118
Alizadeh118

Reputation: 1064

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>

Upvotes: 1

Related Questions