Hinzufügen von Zeilen zu tbody einer Tabelle mit jQuery

Ich versuche, Zeilen zu tbodyeiner Tabelle hinzuzufügen . Aber ich habe Probleme damit. Erstens wird die Funktion, in der alles stattfindet, beim Ändern eines Dropdowns von einer HTML-Seite aufgerufen. Ich habe eine trZeichenfolge erstellt, die das gesamte tdInnere enthält, das die HTML-Elemente, den Text und andere Dinge enthält. Aber wenn ich versuche, diese generierte Zeile der Tabelle hinzuzufügen, indem ich:

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

Ich habe einen Fehler festgestellt. Der Name der Tabelle ist tblEntAttributesund ich versuche, sie der hinzuzufügen tbody.

Tatsächlich kann jQuery nicht tblEntAttributesals HTML-Element abgerufen werden. Aber ich kann mit darauf zugreifendocumemt.getElementById("tblEntAttributes");

Gibt es eine Möglichkeit, dies zu erreichen, indem ich Zeilen zur tbodyTabelle hinzufüge? Vielleicht ein Bypass oder so.

Hier ist der gesamte 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); 

Eine Sache, die ich vergessen habe zu erwähnen, ist die Funktion, in die dieser Code geschrieben wird, die Erfolgsrückruffunktion für einen Ajax-Aufruf. Ich kann mit auf die Tabelle zugreifen, document.getElementById("tblEntAttributes")aber aus irgendeinem Grund $(#tblEntAttributes)scheint es nicht zu funktionieren.

("#tblEntAttributes tbody")

muss sein

$("#tblEntAttributes tbody").

Sie wählen das Element nicht mit der richtigen Syntax aus

Hier ist ein Beispiel für beides

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

und

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

arbeiten http://jsfiddle.net/xW4NZ/

benutze das

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

Ich bin noch nie auf so ein seltsames Problem gestoßen! oO

Wissen Sie, wo das Problem lag? $ funktioniert nicht. Ich habe den gleichen Code mit jQuery ausprobiert jQuery("#tblEntAttributes tbody").append(newRowContent);und es funktioniert wie ein Zauber!

Keine Ahnung, warum dieses seltsame Problem auftritt!

Hier ist eine AppendTo-Version mit dem von Ihnen erwähnten HTML-Dropdown. Bei "change" wird eine weitere Zeile eingefügt.

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

Mit einem Beispiel, mit dem Sie spielen können. Viel Glück!

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

Wie @wirey sagte appendTosollte funktionieren, wenn nicht, dann können Sie dies versuchen:

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

Mit Lodash können Sie eine Vorlage erstellen und dies auf folgende Weise tun:

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

Und hier geht das 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++;
            });
        });

Hier ist es in jsbin