Я пытаюсь добавить строки в таблицу 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), похоже, не работает.
Я никогда не сталкивался с такой странной проблемой, как это! o.o
Вы знаете, в чем проблема? $не работает. Я пробовал тот же код с jQuery, как jQuery("#tblEntAttributes tbody").append(newRowContent);, и он работает как шарм!
Не знаю, почему возникает эта странная проблема!
("#tblEntAttributes tbody")
должно быть
($("#tblEntAttributes tbody")).
Вы не выбираете элемент с правильным синтаксисом
Вот пример того и другого
$(newRowContent).appendTo($("#tblEntAttributes"));
и
$("#tblEntAttributes tbody").append(newRowContent);
рабочий http://jsfiddle.net/xW4NZ/
используйте этот
$("#tblEntAttributes tbody").append(newRowContent);
Как сказал @wirey, appendTo должен работать, если нет, вы можете попробовать следующее:
$("#tblEntAttributes tbody").append(newRowContent);
Вот версия appendTo, в которой вы упомянули выпадающий список html. Он вставляет другую строку в "change".
$('#dropdown').on( 'change', function(e) {
$('#table').append('<tr><td>COL1</td><td>COL2</td></tr>');
});
С примером для игры. Удачи!
С помощью 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