Blog

Add Row Using Javascript [Answered]RSS

2 replies

Last post Feb 10, 2017 09:37 AM by Eric Du

‹ Previous Thread|Next Thread ›

Shortcuts

XD40_Man

Member

56 Points

195 Posts

Add Row Using Javascript

Feb 09, 2017 10:17 PM|XD40_Man|LINK

I have the following function:

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.

<tr class="telerik-reTableEvenRow-1" align="center">
   <td class="telerik-reTableFirstCol-1" style="border-width: 1px; border-style: solid;"></td>
       <td class="telerik-reTableOddCol-1" style="border-width: 1px; border-style: solid;">

                            <br />
                        </td>
                        <td class="telerik-reTableEvenCol-1" style="border-width: 1px; border-style: solid;">

                            <br />
                        </td>
                        <td class="telerik-reTableLastCol-1" style="border-width: 1px; border-style: solid;">

                            <br />
                        </td>
                        <td class="telerik-reTableFirstCol-1" style="border-width: 1px; border-style: solid;">

                            <br />
                        </td>
                        <td class="telerik-reTableFirstCol-1" style="border-width: 1px; border-style: solid;">

                            <br />
                        </td>
                        <td class="telerik-reTableFirstCol-1" style="border-width: 1px; border-style: solid;" colspan="1">

                            <br />
                        </td>
                        <td class="telerik-reTableFirstCol-1" style="border-width: 1px; border-style: solid;" colspan="1"></td>
                        <td class="telerik-reTableFirstCol-1" style="border-width: 1px; border-style: solid;" colspan="1"></td>
                        <td class="telerik-reTableFirstCol-1" style="border-width: 1px; border-style: solid;" colspan="1"></td>
                    </tr>

Thanks in advance!

Cathy Zou

Star

8620 Points

2883 Posts

Re: Add Row Using Javascript

Feb 10, 2017 07:36 AM|Cathy Zou|LINK

Hi XD40_Man,

XD40_Man
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.

Eric Du

Contributor

6650 Points

2718 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:

Sample.json:
 [
     {
         "Book ID": "1",
         "Book Name": "Computer Architecture",
         "Category": "Computers",
         "Price": "125.60"
     },
     {
         "Book ID": "2",
         "Book Name": "Asp.Net 4 Blue Book",
         "Category": "Programming",
         "Price": "56.00"
     },
     {
         "Book ID": "3",
         "Book Name": "Popular Science",
         "Category": "Science",
         "Price": "210.40"
     }
        ]
Page:
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <style>
        table, th, td {
            margin: 10px 0;
            border: solid 1px #333;
            padding: 2px 4px;
            font: 15px Tahoma;
            border-collapse: collapse;
        }

        th {
            font-weight: bold;
        }
    </style>
    <script>
        $.getJSON("sample.json", function (data) {

            var arrItems = [];      // THE ARRAY TO STORE JSON ITEMS.
            $.each(data, function (index, value) {
                arrItems.push(value);       // PUSH THE VALUES INSIDE THE ARRAY.
            });

            // EXTRACT VALUE FOR TABLE HEADER.
            var col = [];
            for (var i = 0; i < arrItems.length; i++) {
                for (var key in arrItems[i]) {
                    if (col.indexOf(key) === -1) {
                        col.push(key);
                    }
                }
            }

            // CREATE DYNAMIC TABLE.
            var table = document.createElement("table");

            // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

            var tr = table.insertRow(-1);                   // TABLE ROW.

            for (var i = 0; i < col.length; i++) {
                var th = document.createElement("th");      // TABLE HEADER.
                th.innerHTML = col[i];
                tr.appendChild(th);
            }

            // ADD JSON DATA TO THE TABLE AS ROWS.
            for (var i = 0; i < arrItems.length; i++) {

                tr = table.insertRow(-1);

                for (var j = 0; j < col.length; j++) {
                    var tabCell = tr.insertCell(-1);
                    tabCell.innerHTML = arrItems[i][col[j]];
                }
            }

            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
            var divContainer = document.getElementById("showData");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);
        });
    </script>
</head>
<body>
    <div id="showData"></div>
</body>

jQuery:

<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <style>
        table, th, td {
            margin: 10px 0;
            border: solid 1px #333;
            padding: 2px 4px;
            font: 15px Tahoma;
            border-collapse:collapse;
        }
        th {
            font-weight: bold;
        }
        .new {
        background-color:beige;
        }
    </style>
    <script>
        $(function () {
            var data = { "Cities": ["LUSAKA", "HARARE"], "Countries": ["ZAMBIA", "ZIMBABWE"] };
            var trHTML = '';
            $.each(data.Countries, function (i, item) {
                trHTML += '<tr class="new"><td>' + data.Countries[i] + '</td><td>' + data.Cities[i] + '</td></tr>';
            });
            $('#location').append(trHTML);
        })
    </script>
</head>
<body>
    <table id="location" border='1'>
        <tr>
            <th>Countries</th>
            <th>Cities</th>
        </tr>
    </table>
</body>

Result:

Best Regards,

Eric Du

‹ Previous Thread|Next Thread ›