仅更新（ajax）表的一部分而不影响整个表答案

【问题标题】：Update (ajax) only part of table without affecting whole table仅更新（ajax）表的一部分而不影响整个表
【发布时间】：2011-02-27 00:04:04
【问题描述】：

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

这个想法是在单击带有thtable 标记的一部分的 clasl "sortby" 链接时更新表行。

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

【问题讨论】：

标签： jquery ajax html-table partial

【解决方案1】：

将需要更新的 trs 放在 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 请求将返回的类型。

【讨论】：

好的，我试试，这听起来很简单。谢谢

【解决方案2】：

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

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

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

【讨论】：

“您是否提出了一个 AJAX 请求，它返回一些表行，并且您想将这些行插入到您的表中？” - 没错。 .list 指的是什么？
我认为 IE 不适合直接从表中添加/删除 TR？
.list 只是表本身，如标记所示。在 IE 添加或删除表格行时，我从来没有遇到过任何问题。
另见：stackoverflow.com/questions/812693/…

【解决方案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 的修改越少越好。

【讨论】：

【解决方案4】：

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

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

【讨论】：