Question

我接近我想要的输出，可以根据每个标题排序我的表，但似乎我的JS有一些错误。我似乎无法弄清楚为什么它不完全按每个标题进行排序，而且我似乎无法弄清楚如何让我的脚本区分天气<td>值是一个简单的输入文本。我需要能够按所有这些<th>天气过滤<td> s有输入。{
这是我的小提琴，主要功能如下 https://jsfiddle.net/eut7qxf6/2/

    var table = $('#user-table');

$('#sort-username, #sort-phone, #sort-firstname, #sort-id')
    .wrapInner('<span title="sort this column"/>')
    .each(function(){

        var th = $(this),
            thIndex = th.index(),
            inverse = false;

        th.click(function(){

            table.find('td input').filter(function(){

                return $(this).index() === thIndex;

            }).sortElements(function(a, b){

                return $(a).attr('value') > $(b).attr('value') ?
                    inverse ? -1 : 1
                    : inverse ? 1 : -1;

            }, function(){

                // parentNode is the element we want to move
                return this.parentNode.parentNode; 

            });

            inverse = !inverse;

        });

    });

Answer 1

您的代码存在两个问题。

首先，您尝试对返回的对象使用索引函数：

table.find('td input')

这总是返回0，因为$（this）变量指向一个输入，它是其单元格的第一个子节点（td）。所以解决方案是用以下代码替换你的table.find：

table.find('td')

现在我们可以验证$（this）.index（）是否与所点击的索引匹配。

当然，此更改会使您的代码中需要进行其他更改。首先是你的sortElement函数现在需要找到它自己才能获得输入值：

return $(a).find('input').attr('value') > $(b).find('input').attr('value') ?
                    inverse ? -1 : 1
                    : inverse ? 1 : -1;

最后一个函数，在sortElements插件中称为getSortable，也需要更改：

return this.parentNode;

其次，您需要考虑所选列的单元格中是否有输入，如果没有输入，则必须考虑直接位于单元格内部的值。

像这样：

var inputA = $(a).find('input').attr('value');
var inputB = $(b).find('input').attr('value');

var valueA = null;
var valueB = null;

if (inputA == null) {
    valueA = parseInt($(a).html());
    valueB = parseInt($(b).html());
} else {
    valueA = $(a).find('input').val();
    valueB = $(b).find('input').val();
}

所以，为了清楚起见，我已经分配了你的jsfiddle in the version that I have made all the changes。

我的表排序有问题

1 个答案: