CODEWITHSUNDEEP
javascripthtml-table
Santosh Gadhave
Santosh Gadhave

Reputation: 37

How to assign data to the <td> of table dynamically using javascript for multiple rows?

I'm stuck with the problem statement mentioned in the title. I have a scenario where I'm getting a comma separated data on a button click and I want to assign that data to the td elements of the table using javascript.

Please refer the below code:

// Consider we have data in comma split format in x array.
// For ex: the data in x array is {1,2,3}{4,5,6}{7,8,9} i.e. 3rows
// Now I want to assign that to td1, td2 and td3 of the table
// In function I'm looping the data as below where I'm directly assigning 
// the data to the td1,td2,td3 id of the table.

for (i = 0; i < x.length; i++) {
    // alert(x[i]);
    document.getElementById('td1').innerHTML = x[i++]; 
    document.getElementById('td2').innerHTML = x[i++];
    document.getElementById('td3').innerHTML = x[i++];
}

The problem is when I assign the data, the new row is not getting created. Instead, the new row is replacing the old row data. The HTML code for the table is as below.

<html>
<body>
    <table class='tbl-qa'>
        <thead>
            <tr>
                <th class='table-header' width='20%'>Title</th>
                <th class='table-header' width='40%'>Description</th>
                <th class='table-header' width='20%'>Date</th>
            </tr>
        </thead>
        <tbody id='table-body'>
            <tr class='table-row' id = 'table-row'>
                <td id = 'td1'>''</td>
                <td id = 'td2'>''</td>
                <td id = 'td3'>''</td>
            </tr>   
        </tbody>
    </table>
</body>
</html>

Can anyone help me out in solving the problem? Note - I want to compulsorily assign the data to the td of the table-row div.

Upvotes: 1

Views: 6651

Answers (3)

M0nst3R
M0nst3R

Reputation: 5283

I am assuming your data looks like the following:

[{
    title: 'Title',
    description: 'Description',
    date: 'Date'
}, {
    // ...
}]

You can dynamically create your <td> element without having to add them to the HTML. The creation will happen inside the loop of your data.

let data = [{
    title: 'T1',
    description: 'D1',
    date: 'DT1'
}, {
    title: 'T2',
    description: 'D2',
    date: 'DT2'
}, {
    title: 'T3',
    description: 'D3',
    date: 'DT3'
}];
let tbody = document.getElementById('table-body');
let tr, td;

data.forEach((element) => {
    tr = document.createElement('tr');
    for (let key in element) {
        if (element.hasOwnProperty(key)) {
            td = document.createElement('td');
            td.innerHTML = element[key];
            tr.appendChild(td);
        }
    }
    tbody.appendChild(tr);
});
<html>
<body>
    <table class="tbl-qa">
        <thead>
            <tr>
                <th class="table-header" width="20%">Title</th>
                <th class="table-header" width="40%">Description</th>
                <th class="table-header" width="20%">Date</th>
            </tr>
        </thead>
        <tbody id="table-body"></tbody>
    </table>
</body>
</html>

Hope this helps.

Upvotes: 0

cmprogram
cmprogram

Reputation: 1884

Your new row will always replace your old row with your current setup.

This is because you are referencing "td1", "td2" and "td3" which as they should, only appears once in your script. You need dynamic ID's to make this work.

You can do this in PHP for example, with: (this example does not include an escape function, which is needed for security reasons)

 $query = "SELECT * FROM example";
 $get_example_query = mysqli_query($connection, $query);
 while($row = mysqli_fetch_assoc($get_example_query)){
 $id = $row['id']
 $content = $row['content'];
 echo "<tr>";
 echo "<td id="$id">$content</td>";
 echo "</tr>;
 }

Upvotes: 0

Andrew L
Andrew L

Reputation: 5486

You data didn't make sense to me, its not valid. I just put it to 3 strings for now and you can let me know if that is not acceptable. Here is how you can dynamically set the <td> elements to a row

var data = ["1,2,3","4,5,6","7,8,9"];
for (i=0; i < data.length; i++){
    var td = document.createElement('td'); // create a td node
    td.innerHTML = data[i]; // fill the td now with a piece of the data array
    document.getElementById("table-row").appendChild(td); // append the td element to the row
}
<table class='tbl-qa'>
  <thead>
    <tr>
      <th class='table-header' width='20%'>Title</th>
      <th class='table-header' width='40%'>Description</th>
      <th class='table-header' width='20%'>Date</th>
    </tr>
  </thead>
  <tbody id='table-body'>
    <tr class='table-row' id = 'table-row'></tr>   
  </tbody>
</table>

Upvotes: 1

Related Questions