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.

Edik

can you post some snippet of your DOM (mostly the table in question) – Lynd

$('#Table1 > tbody') Taken from #6763506 – Athletic

Answer 1

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!

Edik

You should read up about jQuery.noConflict(). It could be that you are using other libraries that also use the $ alias api.jquery.com/jQuery.noConflict – Testate

Answer 2

("#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/

Testate

Inverting the syntax might be more readable: $("#tblEntAttributes tbody").append(newRowContent);. – Muir

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" – Edik

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 #7173898 – Testate

$("#tblEntAttributes > tbody") for direct child tbody? – Leverage

@webNoob13 Yeah if you want to be more specific that should work too – Testate

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? – Leverage

@Leverage 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 – Testate

Answer 3

use this

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

Slumberous

Answer 4

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/

Marietta

Answer 5

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

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

Childish

Answer 6

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

Afterheat