Question

我想按价格对表格进行排序，但价格可能会出现在字符串中：

例如：Starting from $75，today only: $25，$100等

唯一不变的模式是排序后的值旁边总是会有$个符号。

首先，我尝试使用tablesorter jquery插件，添加了自定义解析器并到达this fiddle。

但是为了使用这种方法，似乎我必须让用户选择以后自己对表进行排序，这是我不想要的。否则，如果我将所有分拣机设置为false，我就无法使用自定义money解析器对其进行排序。

那么，我开始使用隐藏的输入，它只包含我想要排序的数值。我不知道它是不是一个好习惯，而且它还要求我将它作为额外的行添加到每个相关的单元格中，我宁愿通过它，如this fiddle。

然后我意识到使用tablesorter插件可能没必要，因为我可以用更少的代码来实现这个结果，就像this fiddle一样，这是我当前的代码

当前代码：

JS：

function sortNum(a, b) {
    var aVal = 1 * $(a).find("input[name='price']").val();
    var bVal = 1 * $(b).find("input[name='price']").val();

    if(aVal == 0)
        return 1;
    else if(bVal == 0)
        return -1;
    else
        return aVal < bVal ? -1 : 1;
}
function sortTheTable(){
    $(function() {
        var elems = $.makeArray($('tr:has(.sort)').remove())
        elems.sort(sortNum);
        console.log(elems);
        $("#sortme").append($(elems));
    });
}

sortTheTable();

HTML：

<table id="sortme">
    <tr>
        <th>name</td>
        <th>price</td>
    </tr>
    <tr>
        <td>a</td>
        <td class="sort">Only 5 <input type="hidden" name="price" value="5"/></td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">$3 <input type="hidden" name="price" value="3"/></td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort">$8 <input type="hidden" name="price" value="8"/></td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort">0 <input type="hidden" name="price" value="0"/></td>
    </tr>
    <tr>
        <td>h</td>
        <td class="sort">2 <input type="hidden" name="price" value="2"/></td>
    </tr>
    <tr>
        <td>p</td>
        <td class="sort">6 <input type="hidden" name="price" value="6"/></td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20 <input type="hidden" name="price" value="20"/></td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">0 <input type="hidden" name="price" value="0"/></td>
    </tr>
</table>

主要问题：

如何使代码仅排序具有隐藏输入的行（或者您建议尽可能使代码更好的更好的练习），而不是具有class="sort"的单元格（我不喜欢＆＃39;我想使用这个类。）

我尝试过切换：

var elems = $.makeArray($('tr:has(.sort)').remove())

分为：

var elems = $.makeArray($('tr:has(input[name='price'])').remove())

但它没有用。

另外，一般情况下，如果你能想出一个更好的方法去做我想做的事情，而不必使用隐藏的输入，请告诉我。这是一种可接受的做法吗？通常我只看到表格中使用的输入。

Answer 1

在您尝试tr时仅选择隐藏input的{{1}}元素，并将$('tr:has(input[name="price"])')功能更改为：

sortNum

这应该可以正常工作：JSFiddle

您在Array.sort中使用的比较函数function sortNum(a, b) { var aVal = 1 * $(a).find("input[name='price']").val(); var bVal = 1 * $(b).find("input[name='price']").val(); return aVal - bVal; }错误，因为文档说明：

如果提供了 compareFunction ，则对数组元素进行排序   根据比较函数的返回值。如果a和b是   比较两个要素，然后：


如果sortNum小于0，请将compareFunction(a, b)排序为低于a的索引，即a先来。

如果b返回0，则compareFunction(a, b)和a相互之间保持不变，但相对于所有不同的方式排序   元素。

如果b大于0，请将compareFunction(a, b)排序为低于b的索引。
  当给定一对特定元素a和compareFunction(a, b)作为其两个参数时，
a必须始终返回相同的值。 如果   返回不一致的结果然后排序顺序未定义。

但是你的功能并不尊重这个规则。例如，如果b返回a = b 1的插入内容，则它们等于。

Answer 2

我的建议仅使用jQuery和js排序来最小化代码并加快速度：

＆＃13;

$(function () {
  $('#sortme tr:has(input[name="price"])').sort(function(a, b) {
    return 1 * $(a).find("input[name='price']").val() - 1 * $(b).find("input[name='price']").val();
  }).appendTo('#sortme');
});

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>


<table id="sortme">
    <tr>
        <th>name</td>
        <th>price</td>
    </tr>
    <tr>
        <td>a</td>
        <td class="sort">Only 5 <input type="hidden" name="price" value="5"/></td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">$3 <input type="hidden" name="price" value="3"/></td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort">$8 <input type="hidden" name="price" value="8"/></td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort">0 <input type="hidden" name="price" value="0"/></td>
    </tr>
    <tr>
        <td>h</td>
        <td class="sort">2 <input type="hidden" name="price" value="2"/></td>
    </tr>
    <tr>
        <td>p</td>
        <td class="sort">6 <input type="hidden" name="price" value="6"/></td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20 <input type="hidden" name="price" value="20"/></td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">0 <input type="hidden" name="price" value="0"/></td>
    </tr>
</table>

＆＃13;

按隐藏输入排序表

2 个答案: