前端之家

  1. 首页
  2. 问答

如何使用jQuery按自定义列对表格进行排序

• 问答

所以我有一个引导表，可以在onchange中按selectbox对其进行排序。但是我想按自定义列对表格排序。当我选择选项1时，我应该对列[1]进行排序，否则对列[2]进行排序（在选定的选项2上）。列[1]-名称必须按升序排序，列[2]-地址必须按降序排序，或者谁可以给我正确的方法？

<!DOCTYPE html>
<html>

<head>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnqq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmvgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>

</head>

<body>
    <div class="container">
        <div class="row d-flex justify-content-center align-items-center">
            <div class="col-12">
                <select class="m-auto" id="select" onchange="sortTable();">
                    <option value="" disabled selected>SORTING </option>
                    <option value="0">NAMES Ascending</option>
                    <option value="1">ADDRESS Descending</option>
                </select>
            </div>

        </div>
        <div class="row mt-3">
            <div class="col-12">
                <table class="table" id="myTable">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Name</th>
                            <th scope="col">Address</th>
                            <th scope="col">City</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Inna</td>
                            <td>St. Park 3 </td>
                            <td>London</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Anna</td>
                            <td>Boston Street 4 </td>
                            <td>London</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Emma</td>
                            <td>Harrow 19 </td>
                            <td>London</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>Chris</td>
                            <td>Antoan Blick 19 </td>
                            <td>London</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

</html>

<script>
    function sortTable() {
        var rows = $("#myTable tbody  tr").get();

        rows.sort(function (a,b) {
            var A = $(a)
                .children("td")
                .eq(1)
                .text()
                .toUpperCase();
            var B = $(b)
                .children("td")
                .eq(2)
                .text()
                .toUpperCase();

            if (A < B) {
                return -1;
            }

            if (A > B) {
                return 1;
            }

            return 0;
        });

        $.each(rows,function (index,row) {
            $("#myTable")
                .children("tbody")
                .append(row);
        });
    }
</script>
ananxiao 回答：如何使用jQuery按自定义列对表格进行排序

按照以下脚本更新脚本 

function sortTable() {
    var rows = $("#myTable tbody  tr").get();
    var selected_column = $('#select').val();
    selected_column = +selected_column+1;

    rows.sort(function (a,b) {

        var A = $(a)
            .children("td")
            .eq(selected_column)
            .text()
            .toUpperCase();
        var B = $(b)
            .children("td")
            .eq(selected_column)
            .text()
            .toUpperCase();

        if(selected_column==1){
            return ascending(A,B);
        }else if(selected_column==2){
            return descending(A,B);
        }
    });

    $.each(rows,function (index,row) {
        $("#myTable")
            .children("tbody")
            .append(row);
    });
}

function ascending(A,B){
    if (A < B) {
            return -1;
        }

        if (A > B) {
            return 1;
        }

        return 0;
}

function descending(A,B){
    if (A < B) {
            return 1;
        }

        if (A > B) {
            return -1;
        }

        return 0;
}
bootstrap-4bootstrap-tablejavascriptjquery
本文链接：https://www.f2er.com/3089292.html

大家都在问