Добавление строк в tbody таблицы с использованием jquery

Я пытаюсь добавить строки в таблицу tbody таблицы. Но у меня возникают проблемы с этим. Во-первых, функция, где все происходит, вызывается смена выпадающего списка с html-страницы. Я создал строку tr, содержащую все td внутри, содержащую элементы html, текст и другие материалы. Но когда я пытаюсь добавить эту сгенерированную строку в таблицу, используя:

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

Я столкнулся с ошибкой. Имя таблицы tblEntAttributes, и я пытаюсь добавить его в tbody.

На самом деле, что происходит, jQuery не может получить tblEntAttributes как элемент html. Но я могу получить доступ к нему, используя documemt.getElementById("tblEntAttributes");

Можно ли достичь этого, добавив строки в таблицу tbody. Может быть, обход или что-то в этом роде.

Здесь весь код:

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

Одна вещь, о которой я забыл упомянуть, - это функция, в которой этот код написан, на самом деле является функцией обратного вызова успеха для вызова ajax. Я могу получить доступ к таблице с помощью document.getElementById("tblEntAttributes"), но по какой-то причине $(#tblEntAttributes), похоже, не работает.

Ответ 1

Я никогда не сталкивался с такой странной проблемой, как это! o.o

Вы знаете, в чем проблема? $не работает. Я пробовал тот же код с jQuery, как jQuery("#tblEntAttributes tbody").append(newRowContent);, и он работает как шарм!

Не знаю, почему возникает эта странная проблема!

Ответ 2

("#tblEntAttributes tbody")

должно быть

($("#tblEntAttributes tbody")).

Вы не выбираете элемент с правильным синтаксисом

Вот пример того и другого

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

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

рабочий http://jsfiddle.net/xW4NZ/

Ответ 3

используйте этот

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

Ответ 4

Как сказал @wirey, appendTo должен работать, если нет, вы можете попробовать следующее:

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

Ответ 5

Вот версия appendTo, в которой вы упомянули выпадающий список html. Он вставляет другую строку в "change".

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

С примером для игры. Удачи!

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

Ответ 6

С помощью Lodash вы можете создать шаблон, и вы можете сделать это следующим образом:

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

И вот 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++;
            });
        });

Здесь он находится в jsbin