function addRow() {
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= //Not sure if all my HTML goes here or what!
row.insertCell(1).innerHTML= value1;
row.insertCell(2).innerHTML= value2;
}
I'm pulling back a dataset that could contain up to four rows of data. How can I add a row to my table depending on how many rows are returned?
Here's the HTML for the row. When only one row comes back everything is fine. But that won't always be the case.
How can I add a row to my table depending on how many rows are returned?
From my understanding, you want add specified row number based on the row number exist in table.
If that the case. you could refer to the sample below:
<style>
table, td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
</style>
<script>
function myFunction() {
var table = document.getElementById("myTable");
var rowcount = table.rows.length;
var rowaddindex = 0;
for (var i = 0; i < rowcount; i++) {
var row = table.insertRow(rowcount + rowaddindex);
//you could add value to each cell based on the return value form dataset
row.insertCell(0).innerHTML = "//Not sure if all my HTML goes here or what!";
row.insertCell(1).innerHTML = "value1";
row.insertCell(2).innerHTML = "value2";
rowaddindex++;
}
}
</script>
<table id="myTable">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td>Row1 cell3</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
<td>Row2 cell3</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
<td>Row3 cell3</td>
</tr>
</table> <button onclick="myFunction()" type="button">Try it</button>
After click Try it button. output screenshot as below:
Besides, if my understanding is incorrect. would you please provide more description about your problem?
Best Regards
Cathy
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
56 Points
196 Posts
Add Row Using Javascript
Feb 09, 2017 10:17 PM|XD40_Man|LINK
I have the following function:
I'm pulling back a dataset that could contain up to four rows of data. How can I add a row to my table depending on how many rows are returned?
Here's the HTML for the row. When only one row comes back everything is fine. But that won't always be the case.
Thanks in advance!
Star
8670 Points
2882 Posts
Re: Add Row Using Javascript
Feb 10, 2017 07:36 AM|Cathy Zou|LINK
Hi XD40_Man,
From my understanding, you want add specified row number based on the row number exist in table.
If that the case. you could refer to the sample below:
After click Try it button. output screenshot as below:
Besides, if my understanding is incorrect. would you please provide more description about your problem?
Best Regards
Cathy
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Contributor
6730 Points
2715 Posts
Re: Add Row Using Javascript
Feb 10, 2017 09:37 AM|Eric Du|LINK
Hi XD40_Man,
According to your description, I agree with Cathy's solution, also I have the other solution. Split data and html tag in JS or jQuery.
This method is usually used for dynamically create table through the returned data. Also you could add class to it. Here are samples code:
JS Version:
jQuery:
Result:
Best Regards,
Eric Du
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.