使用jQuery将行添加到表的tbody

我试图添加行到表的tbody 。 但是我遇到了这个问题。 首先，所有事情发生的function被称为从HTML页面的下拉改变。 我创build了一个trstring，其中包含所有包含html元素，文本和其他内容的td 。 但是，当我试图将生成的行添加到表中使用：

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

我遇到一个错误。 表的名字是tblEntAttributes ，我tblEntAttributes它添加到tbody 。

实际上发生了什么是jQuery是无法获得tblEntAttributes作为一个HTML元素。 但我可以使用documemt.getElementById("tblEntAttributes");来访问它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调用的成功callback函数。 我能够访问表使用document.getElementById("tblEntAttributes")但由于某种原因$(#tblEntAttributes)似乎并没有工作。

Answer 1

("#tblEntAttributes tbody")

需要是

($("#tblEntAttributes tbody")) 。

您没有select具有正确语法的元素

这是两个例子

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

和

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

工作http://jsfiddle.net/xW4NZ/

Answer 2

用这个

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

Answer 3

我从来没有遇到过这样一个奇怪的问题！ OO

你知道问题是什么吗？ $不工作。 我尝试了像jQuery一样的jQuery("#tblEntAttributes tbody").append(newRowContent); 它就像一个魅力！

不知道为什么这个奇怪的问题发生！

Answer 4

正如@威胁说appendTo应该工作，如果不是那么你可以试试这个：

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

Answer 5

这是一个appendTo版本，使用您提到的html下拉菜单。 它在“更改”上插入另一行。

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

举一个例子让你玩。 祝你好运！

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

Answer 6

用Lodash你可以创build一个模板，你可以这样做：

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