Question

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="list">
              <tr>
                <th><a href="#" class="sortby">Full Name</a></th>
                <th><a href="#" class="sortby">City</a></th>
                <th><a href="#" class="sortby">Country</a></th>
                <th><a href="#" class="sortby">Status</a></th>
                <th><a href="#" class="sortby">Education</a></th>
                <th><a href="#" class="sortby">Tasks</a></th>
              </tr>
    <div class="dynamicData">
              <tr>
                <td>Firstname Lastname</a></td>
                <td>Los Angeles</td>
                <td>USA</td>
                <td>Married</td>
                <td>High School</td>
                <td>4</td>
              </tr>
              </tr>
              <tr>
                <td>Firstname Lastname</a></td>
                <td>Los Angeles</td>
                <td>USA</td>
                <td>Married</td>
                <td>High School</td>
                <td>4</td>
           </tr>
    </div> 
</table>

我们的想法是在点击包含"sortby" th标记的clasl table的链接时更新表格行。

我尝试插入div但这不起作用。在两个表中分离它不是一个好的解决方案，因为两个表格单元格中的宽度不会相互跟随。还有其他解决办法吗？

Answer 1

实际上，你不能在表格中拥有div。您是否想要发出一个AJAX请求，它返回一些表行，并且您想将这些行插入到表中？如果是这样，那怎么样：

$.get('...', function(data) {
    $('.list tr:not(:has(.sortby))').remove().after(data);
});

换句话说，找到并删除你不想要的行，然后插入你想要的东西。

Answer 2

将需要更新的标记放在tbody标记中，并将标题放在thead标记中。

您可以使用标准jQuery向tbody添加/删除trs。

我建议你查看一堆堆的现有jQuery插件（编辑：做这种事情 - 动态数据的排序）。不幸的是，它目前处于离线状态，所以我无法提供链接！

修改：

trs =数据行，即：

<tr> <td>Firstname Lastname</td> <td>Los Angeles</td> <td>USA</td> <td>Married</td> <td>High School</td> <td>4</td> </tr>

我认为这是您的AJAX请求将返回的类型。

Answer 3

对于排序，您可以尝试直接对行进行洗牌：

将第0行移到第1行：

$("table.list tr").eq(0).insertAfter($("table.list tr").eq(1))

在末尾插入一个新行如下所示：

$("<tr>Content</tr>").insertAfter($("table.list tr:last"))

删除行：

$("table.list tr").eq(1).remove()

如果你一次做的不仅仅是一些变化，你应该考虑使用jQuery在DOM之外构建一个新表。然后一举取代旧桌子。对DOM的修改越少越好。

Answer 4

您可以附加新的数据行，并使用常规jQuery删除不需要的行。

根据排序的工作方式，此插件可能是一种替代方案，因为它允许按列过滤表格 http://tomcoote.co.uk/code-bank/jquery-column-filters/

更新（ajax）只是表的一部分而不影响整个表

4 个答案: