Adding rows to tbody of a table using jQuery

Question

I am trying to add rows to the tbody of a table. But I am having issues with achieving that. Firstly, the function where everything takes place is called on change of a dropdown from a html page. I created a tr string containing all the td inside that containing the html elements, text and other stuff. But when I am trying to add that generated row to the table using:

$(newRowContent).appendTo("#tblEntAttributes tbody");

I am encountering an error. The name of the table is tblEntAttributes and I am trying to add it to the tbody.

Actually what's happening is jQuery is unable to get tblEntAttributes as an html element. But I can access it using documemt.getElementById("tblEntAttributes");

Is there any way I can achieve this by adding rows to the tbody of the table. Maybe a bypass or something.

Here's the entire code:

var newRowContent = "<tr><td><input type=\"checkbox\" id=\"" + chkboxId + "\" value=\"" + chkboxValue + "\"></td><td>" + displayName + "</td><td>" + logicalName + "</td><td>" + dataType + "</td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td></tr>";

$("#tblEntAttributes tbody").append(newRowContent);

One thing I forgot to mention is the function where this code is written is actually the success callback function for a ajax call. I am able to access the table using document.getElementById("tblEntAttributes") but for some reason $(#tblEntAttributes) doesn't seem to work.

can you post some snippet of your DOM (mostly the table in question) — El Guapo, Jun 01 '12 at 13:51
$('#Table1 > tbody') Taken from http://stackoverflow.com/questions/6763006/how-to-get-the-tbody-element-of-a-table-using-jquery/6763036#6763036 — Roman M, Mar 24 '13 at 19:04

wirey00 · Answer 1 · 2018-11-27T21:14:42.520

123

("#tblEntAttributes tbody")

needs to be

$("#tblEntAttributes tbody").

You are not selecting the element with the correct syntax

Here's an example of both

$(newRowContent).appendTo($("#tblEntAttributes"));

and

$("#tblEntAttributes tbody").append(newRowContent);

working http://jsfiddle.net/xW4NZ/

edited Nov 27 '18 at 21:14

answered Jun 01 '12 at 13:51

wirey00

33,517
7
54
65

7

Inverting the syntax might be more readable: `$("#tblEntAttributes tbody").append(newRowContent);`. – Frédéric Hamidi Jun 01 '12 at 13:53
I have added the code in the OP. It keeps giving the error : "Microsoft JScript runtime error: Unable to get value of the property 'append': object is null or undefined" – Anupam Jun 04 '12 at 06:04
Are you putting those inside $(document).ready(function() { // some code here }); Could be that the code is running before the dom is ready which is why you are unable to select the element. Found a similar error here http://stackoverflow.com/questions/7173398/unable-to-get-value-of-the-property-appendchild-object-is-null-or-undefined – wirey00 Jun 04 '12 at 13:34
`$("#tblEntAttributes > tbody")` for direct child tbody? – mLstudent33 Nov 12 '20 at 04:25
1

@webNoob13 Yeah if you want to be more specific that should work too – wirey00 Nov 12 '20 at 16:13
in instances like this jquery seems so convenient but I keep being told on S.O. "Use vanilla JS because it's better than what it was when jQuery was created/first released." What's your opinion on that? – mLstudent33 Nov 12 '20 at 17:57
@mLstudent33 I think it all depends on what you're doing. It's not worth it to bring in a library if you're only doing simple things that can be done with vanilla JS. If you're already using the library then you might as well use the tools provided by it to keep it consistent – wirey00 Nov 23 '20 at 18:31

score 42 · Answer 2 · edited Dec 10 '14 at 17:01

42

use this

$("#tblEntAttributes tbody").append(newRowContent);

edited Dec 10 '14 at 17:01

IAbstract

19,551
15
98
146

answered Oct 16 '14 at 11:56

user3962745

1,097
2
12
17

score 17 · Accepted Answer · answered Jun 04 '12 at 06:33

17

I have never ever come across such a strange problem like this! o.O

Do you know what the problem was? $ isn't working. I tried the same code with jQuery like jQuery("#tblEntAttributes tbody").append(newRowContent); and it works like a charm!

No idea why this strange problem occurs!

answered Jun 04 '12 at 06:33

Anupam

1,821
3
23
41

11

You should read up about jQuery.noConflict(). It could be that you are using other libraries that also use the $ alias http://api.jquery.com/jQuery.noConflict/ – wirey00 Jun 04 '12 at 13:50

score 6 · Answer 4 · answered Jun 01 '12 at 14:21

Here is an appendTo version using the html dropdown you mentioned. It inserts another row on "change".

$('#dropdown').on( 'change', function(e) {
    $('#table').append('<tr><td>COL1</td><td>COL2</td></tr>');
});

With an example for you to play with. Best of luck!

http://jsfiddle.net/xtHaF/12/

score 4 · Answer 5 · answered Jun 01 '12 at 13:59

4

As @wirey said appendTo should work, if not then you can try this:

$("#tblEntAttributes tbody").append(newRowContent);

answered Jun 01 '12 at 13:59

thecodeparadox

86,271
21
138
164

score 2 · Answer 6 · answered Aug 08 '17 at 23:41

With Lodash you can create a template and you can do that following way:

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12">
                <table id="tblEntAttributes" class="table">
                    <tbody>
                        <tr>
                            <td>
                                chkboxId
                            </td>
                            <td>
                               chkboxValue
                            </td>
                            <td>
                                displayName
                            </td>
                            <td>
                               logicalName
                            </td>
                            <td>
                                dataType
                            </td>
                        </tr>
                    </tbody>
                </table>
                <button class="btn btn-primary" id="test">appendTo</button>
            </div>
        </div>
     </div>

And here goes the javascript:

        var count = 1;
        window.addEventListener('load', function () {
            var compiledRow = _.template("<tr><td><input type=\"checkbox\" id=\"<%= chkboxId %>\" value=\"<%= chkboxValue %>\"></td><td><%= displayName %></td><td><%= logicalName %></td><td><%= dataType %></td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td></tr>");
            document.getElementById('test').addEventListener('click', function (e) {
                var ajaxData = { 'chkboxId': 'chkboxId-' + count, 'chkboxValue': 'chkboxValue-' + count, 'displayName': 'displayName-' + count, 'logicalName': 'logicalName-' + count, 'dataType': 'dataType-' + count };
                var tableRowData = compiledRow(ajaxData);
                $("#tblEntAttributes tbody").append(tableRowData);
                count++;
            });
        });

Here it is in jsbin

Adding rows to tbody of a table using jQuery

6 Answers6

Linked