javascript - jquery中使用列设置表的顺序

标签 javascript jquery sorting

我有这样的表: enter image description here

下面是上表的 html。我正在尝试使用 sox_color 和 size 来订购表格。就像颜色字母 A 一样size 1 将首先出现，所以一个。我应该使用 jquery 排序插件还是自定义代码可以帮助我。

   <table class="configurable-product-table" cellspacing="0">
    <tbody>
        <tr>
            <th>Size</th>
            <th>sox_Colour</th>
            <th>Availability</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>2-8
                <input type="hidden" name="super_attribute_quickshop[758][140]" value="17">
            </td>
            <td>red
                <input type="hidden" name="super_attribute_quickshop[758][139]" value="10">
            </td>
            <td>
                <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
            </td>
            <td>
                <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[758]" value="0">
            </td>
        </tr>

        <tr>
            <td>2-8
                <input type="hidden" name="super_attribute_quickshop[761][140]" value="17">
            </td>
            <td>Pink
                <input type="hidden" name="super_attribute_quickshop[761][139]" value="66">
            </td>
            <td>
                <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
            </td>
            <td>
                <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[761]" value="0">
            </td>
        </tr>

        <tr>
            <td>2-8
                <input type="hidden" name="super_attribute_quickshop[764][140]" value="17">
            </td>
            <td>Orange
                <input type="hidden" name="super_attribute_quickshop[764][139]" value="63">
            </td>
            <td>
                <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
            </td>
            <td>
                <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[764]" value="0">
            </td>
        </tr>

        <tr>
            <td>2-8
                <input type="hidden" name="super_attribute_quickshop[767][140]" value="17">
            </td>
            <td>Light Green
                <input type="hidden" name="super_attribute_quickshop[767][139]" value="80">
            </td>
            <td>
                <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
            </td>
            <td>
                <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[767]" value="0">
            </td>
        </tr>

        <tr>
            <td>2-8
                <input type="hidden" name="super_attribute_quickshop[770][140]" value="17">
            </td>
            <td>Purple
                <input type="hidden" name="super_attribute_quickshop[770][139]" value="52">
            </td>
            <td>
                <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
            </td>
            <td>
                <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[770]" value="0">
            </td>
        </tr>

        <tr>
            <td>6-11
                <input type="hidden" name="super_attribute_quickshop[771][140]" value="18">
            </td>
            <td>Purple
                <input type="hidden" name="super_attribute_quickshop[771][139]" value="52">
            </td>
            <td>
                <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
            </td>
            <td>
                <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[771]" value="0">
            </td>
        </tr>

        <tr>
            <td>2-8
                <input type="hidden" name="super_attribute_quickshop[773][140]" value="17">
            </td>
            <td>Beige
                <input type="hidden" name="super_attribute_quickshop[773][139]" value="53">
            </td>
            <td>
                <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
            </td>
            <td>
                <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[773]" value="0">
            </td>
        </tr>

        <tr>
            <td>6-11
                <input type="hidden" name="super_attribute_quickshop[774][140]" value="18">
            </td>
            <td>Beige
                <input type="hidden" name="super_attribute_quickshop[774][139]" value="53">
            </td>
            <td>
                <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
            </td>
            <td>
                <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[774]" value="0">
            </td>
        </tr>

        <tr>
            <td>2-8
                <input type="hidden" name="super_attribute_quickshop[776][140]" value="17">
            </td>
            <td>Grey
                <input type="hidden" name="super_attribute_quickshop[776][139]" value="56">
            </td>
            <td>
                <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
            </td>
            <td>
                <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[776]" value="0">
            </td>
        </tr>

        <tr>
            <td>6-11
                <input type="hidden" name="super_attribute_quickshop[777][140]" value="18">
            </td>
            <td>Grey
                <input type="hidden" name="super_attribute_quickshop[777][139]" value="56">
            </td>
            <td>
                <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
            </td>
            <td>
                <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[777]" value="0">
            </td>
        </tr>

        <tr>
            <td>2-8
                <input type="hidden" name="super_attribute_quickshop[779][140]" value="17">
            </td>
            <td>Brown
                <input type="hidden" name="super_attribute_quickshop[779][139]" value="78">
            </td>
            <td>
                <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
            </td>
            <td>
                <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[779]" value="0">
            </td>
        </tr>

        <tr>
            <td>6-11
                <input type="hidden" name="super_attribute_quickshop[780][140]" value="18">
            </td>
            <td>Brown
                <input type="hidden" name="super_attribute_quickshop[780][139]" value="78">
            </td>
            <td>
                <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
            </td>
            <td>
                <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[780]" value="0">
            </td>
        </tr>

        <tr>
            <td>2-8
                <input type="hidden" name="super_attribute_quickshop[782][140]" value="17">
            </td>
            <td>Navy
                <input type="hidden" name="super_attribute_quickshop[782][139]" value="64">
            </td>
            <td>
                <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
            </td>
            <td>
                <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[782]" value="0">
            </td>
        </tr>

        <tr>
            <td>6-11
                <input type="hidden" name="super_attribute_quickshop[783][140]" value="18">
            </td>
            <td>Navy
                <input type="hidden" name="super_attribute_quickshop[783][139]" value="64">
            </td>
            <td>
                <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
            </td>
            <td>
                <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[783]" value="0">
            </td>
        </tr>

        <tr>
            <td>2-8
                <input type="hidden" name="super_attribute_quickshop[785][140]" value="17">
            </td>
            <td>black
                <input type="hidden" name="super_attribute_quickshop[785][139]" value="9">
            </td>
            <td>
                <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
            </td>
            <td>
                <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[785]" value="0">
            </td>
        </tr>

        <tr>
            <td>6-11
                <input type="hidden" name="super_attribute_quickshop[786][140]" value="18">
            </td>
            <td>black
                <input type="hidden" name="super_attribute_quickshop[786][139]" value="9">
            </td>
            <td>
                <p class="availability in-stock"> <span class="fa fa-check custom-bg"> </span></p>
            </td>
            <td>
                <input type="number" id="qty" class="sum" min="0" max="200" name="config_table_qty[786]" value="0">
            </td>
        </tr>

    </tbody>
</table>

最佳答案

你可以使用像这样的排序函数

var $tbody = $('.configurable-product-table tbody');
var trs = $tbody.children().slice(1).get();

trs.sort(function (a, b) {
    var $atds = $(a).find('td'),
        $btds = $(b).find('td');
    var c = $atds.eq(1).text().localeCompare($btds.eq(1).text());
    if (c == 0) {
        c = sizeFormat($atds.eq(0).text()).localeCompare(sizeFormat($btds.eq(0).text()));
    }
    return c;
})

function sizeFormat(size) {
    return size.replace(/\d+/g, function (v) {
        return +v < 10 ? '0' + v : v
    })
}

$tbody.append(trs)

演示:Fiddle

关于javascript - jquery中使用列设置表的顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29819738/

上一篇：javascript - Magento XML AddJs - 在 src 之前添加参数

下一篇：javascript - 在div元素的h2标签内写入本地存储值

相关文章：

java - Java中如何检查一个数组的值并将其与另一个数组进行比较？

c - 按字母顺序对字符串列表进行排序 (C)

algorithm - 如何为每个元组计算数组中严格更大的元组的数量？

javascript - jQuery 或 JavaScript 如何突出显示文本区域中的选定文本

jquery - 查找具有给定类和多个属性的元素 Jquery

javascript - 在两个选择菜单之间切换选择

javascript - 将对象传递回函数

javascript - 使用 HTML 将页眉和页脚作为单独的文件包含在内

javascript - 用javascript匹配回文中的单个字符？

javascript - 服务器不可用

©2024 IT工具网  联系我们