Question

我有下面的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>

Answer 1

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

例如，我使用了此simple JQuery sorting function并创建了this JSFiddle demo。

我像这样修改了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-col游戏，我对Salary标题和类salary-col的单元格执行相同操作。

然后我使用JQuery向name-col 标题添加点击监听器，然后触发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排序函数中提供的函数。我不是它的作者。

但是，您会注意到此脚本只会排序一次，因为比较器（>）的方向是硬编码的。实现逻辑以反转这种类型的一种快速肮脏的方法是这样的：

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布尔变量只是一种允许你反转排序顺序的hackish方式。如果它是升序的，它会在比较器函数中翻转布尔值和>的方向。这可能是一种更有效的方法，但我只是想做一个快速而又肮脏的例子。

你的双表模型会遇到很多问题，特别是在调整列的大小时。如果数据表中的单元格中包含较长的数据，则数据列将不再与标题列对齐。我强烈建议您只使用一个表来标记和数据。

Answer 2

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

HTML排序 - 不同表上的标题

2 个答案: