-1

我有下面的 html 表，其中单独的表上的标题和另一个表上的内容。当我单击另一个表中的标题时，我必须对表进行排序。

我发现了很多 JavaScript 示例，这些示例只有在标题位于同一个表中时才有效。你们可以给我一些与我的任务相关的示例吗？

<html> 
    <table > 
        <tr>
            <th>Name</th>
            <th>Salary</th>
        </tr> 
    </table> 
    <table>
        <tr>
            <td>Fred</td>
            <td>$12000.00</td>
        </tr> 
        <tr>
            <td>Kevin</td>
            <td>$191200.00</td>
        </tr> 
    </table>
</html>
4

2 回答 2

1

如果您将一些类添加到列中，以便列单元格和关联的标题具有相同的类名，那么利用其他现有的 JavaScript 解决方案并不难。

例如，我使用了这个简单的 JQuery 排序函数并创建了这个 JSFiddle 演示。

我像这样修改了HTML：

<html> 
    <table id="heading"> 
        <tr>
            <th class="name-col">Name</th>
            <th class="salary-col">Salary</th>
        </tr> 
    </table> 
    <table id="data">
        <tr>
            <td class="name-col">Fred</td>
            <td class="salary-col">$12000.00</td>
        </tr> 
        <tr>
            <td class="name-col">Kevin</td>
            <td class="salary-col">$191200.00</td>
        </tr> 
    </table>
</html>​

请注意，我将标题 Name 和该列中的所有单元格与类name-col进行了比较，并且我对 Salary 标题和包含该类的单元格做了相同的操作salary-col。

name-col 然后我使用 JQuery 在标题中添加了一个点击侦听器，然后触发了name-col 单元格上的排序功能：

$('th.name-col').click(function() {
    $('td.name-col').sortElements(function(a, b){
        return $(a).text() > $(b).text() ? 1 : -1;
    }, function(){ return this.parentNode; });
});

$('th.salary-col').click(function() {
    $('td.salary-col').sortElements(function(a, b){
        return $(a).text() > $(b).text() ? 1 : -1;
    }, function(){ return this.parentNode; });
});

在这个例子中，sortElements是我上面链接的简单 JQuery 排序函数中提供的函数。我不是它的作者。

但是，您会注意到此脚本只会排序一次，因为比较器 ( >) 的方向是硬编码的。一种实现逻辑来反转这种排序的快速n-dirty方法是这样的：

var nameAsc = false;
var salaryAsc = false;

$('th.name-col').click(function() {
    $('td.name-col').sortElements(function(a, b){
        if (nameAsc) {
            nameAsc = false;
            return $(a).text() > $(b).text() ? 1 : -1;
        } else {
            nameAsc = true;
            return $(a).text() < $(b).text() ? 1 : -1;
        }
    }, function(){ return this.parentNode; });
});

$('th.salary-col').click(function() {
    $('td.salary-col').sortElements(function(a, b){
        if(salaryAsc) {
            salaryAsc = false;
            return $(a).text() > $(b).text() ? 1 : -1;
        } else {
            salaryAsc = true;
            return $(a).text() < $(b).text() ? 1 : -1;
        }
    }, function(){ return this.parentNode; });
});

这里的nameAsc和salaryAsc布尔变量只是一种允许您反转排序顺序的骇人听闻的方式。>如果它是上升的，它会翻转比较器函数中的布尔值和方向。可能有一种更有效的方法可以做到这一点，但我只是想举一个简单粗暴的例子。

您的两表模型会遇到很多问题，尤其是在调整列大小时。如果数据表中的单元格中有更长的数据，您的数据列将不再与标题列对齐。我强烈建议您只为标题和数据使用一个表。

于 2012-09-24T22:11:40.490 回答
0

使用 sorttable.js 进行排序，在单击列标题进行排序时可能会出现列对齐问题....

<script type="text/javascript" src="http://community.wikidot.com/local--files/howto:sortable-tables-js/sorttable.js"></script>

<style>
        th, td{
            padding: 3px;//important
        }
</style>
<table class="sortable">
<tr><th>...</th></tr><tr><td>...</td</tr>
</table>
于 2015-01-01T07:18:36.747 回答