按隐藏输入排序表

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" 的单元格（我不想使用这个类）。

我尝试过切换：

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

进入：

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

但它不起作用。

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

Answer 1

在您尝试 $('tr:has(input[name="price"])') 时仅选择具有隐藏 input 的 tr 元素并将您的 sortNum 函数更改为：

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

这应该可以正常工作：JSFiddle

您在Array.sort 中使用的比较函数sortNum 是错误的，如文档所述：

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

• 如果compareFunction(a, b) 小于0，则将a 排序到比b 低的索引，即a 排在第一位。
• 如果compareFunction(a, b) 返回0，则保持a 和b 彼此保持不变，但对所有不同的 元素。
• 如果compareFunction(a, b) 大于0，则将b 排序到比a 低的索引。
• 当给定一对特定元素 a 和 b 作为其两个参数时，compareFunction(a, b) 必须始终返回相同的值。 如果 返回不一致的结果，则排序顺序未定义。

但是您的函数不遵守此规则。例如，如果a = b 您返回1 insetad of 0，因为它们是相等的。

Answer 2

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

$(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');
});

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