Question

我的表格定义如下：

<table id="myTable" cellpadding="0" cellspacing="0">
  <thead><tr>
    <th>Date</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr></thead>

  <tbody>
    <!-- rows will go here -->
  </tbody>
</table>

我试图通过JavaScript在运行时动态填充'myTable'。为了适应这一点，我使用的是JQuery。我想在'myTable'中的tbody元素中写一些HTML。但是，我在理解如何使用选择器执行此操作时遇到问题。我知道我可以使用以下方式获取'myTable'：

$("#myTable")

我知道我可以使用以下内容设置myTable的HTML：

$("#myTable").html(someHtmlString);

但是，它设置整个表的HTML。实际上，我只想在'myTable'的TBODY中设置HTML。我如何使用JQuery做到这一点？

谢谢！

Answer 1

你会使用：

$("#myTable > tbody");

选择tbody元素作为#myTable的直接后代。

或者，您可以使用：

$('tbody', '#myTable');

查找tbody上下文中的所有#myTable个元素。

在jQuery中，通常有几种方法可以实现您的需要。

另一种方式是：

$('#myTable').children('tbody');

实际上与我上面的第一个解决方案相同。

jQuery有很棒的文档：

选择器： http://api.jquery.com/category/selectors/

遍历： http://api.jquery.com/category/traversing/

Answer 2

如果要添加行，请找到tbody元素并使用append，如果要替换所有行，则使用html。

$('#myTable tbody').append(someRowHtml);

$('#myTable tbody').html(someRowHtml);

请注意，如果你有多个tbody元素，你还需要使用:first选择器（或nth-child - 不要忘记，虽然它是从零开始的，但是你有一个thead元素来获得正确的元素。

$('#myTable tbody:first').append(...);

Answer 3

$("#myTable tbody").html(someHtmlString);

Answer 4

尝试使用$("#myTable > tbody").html("");

Answer 5

尝试：

$("#myTable tbody")

Answer 6

给你的tbody一个id，然后用你的表做同样的事情

＆LT; tbody id ='myTbody'＆gt;

Answer 7

你可以这样做：

$("#myTable tbody").html(html_here);

Answer 8

$('#myTable tbody').append('<tr><td>foo</td><td>bar</td></tr>');

JQuery - 设置TBODY

8 个答案: