0 
<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"这个想法是在单击带有作为标签一部分的clasl 的链接时更新表行th table。

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

4

4 回答 4

2

实际上，您不能div在表中包含 s。您是否提出 AJAX 请求，它返回一些表行，并且您想将这些行插入到您的表中？如果是这样，这个怎么样：

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

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

于 2010-06-02T19:30:08.973 回答
2

将需要更新的 trs 放入tbody标签中，并将您的标头放入thead标签中。

您可以tbody使用标准 jQuery 添加/删除 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 请求将返回的类型。

于 2010-06-02T19:31:45.067 回答
1

对于排序，您可以尝试直接打乱行：

将第 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 的修改越少越好。

于 2010-06-02T19:54:44.060 回答
0

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

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

于 2010-11-04T20:39:47.707 回答