表格排序-使用冒泡排序

有些场合不能用框架自带的排序功能，需要自个实现，记录html文件如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sort</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <!--<script type="text/javascript" src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script type="text/javascript">
        // 排序增排序 冒泡
        function sort1(){
            for(var i = 0;i<$("tbody tr").length-1;i++) {
                for(var j = 0;j<$("tbody tr").length-i-1;j++){
                    var stringMax = $("tbody tr:eq("+j+")").find(".product_sort").val();
                    var stringMin = $("tbody tr:eq("+(j+1)+")").find(".product_sort").val();
                    var intMax = parseInt(stringMax);
                    var intMin = parseInt(stringMin);
                    if(isNaN(intMax)) intMax = 99999;
                    if(intMax > intMin){
                        //把大的数字放到后面
                        $("tbody tr:eq("+j+")").insertAfter($("tbody tr:eq("+(j+1)+")"));
                    }
                }
            }
        }

        // 排序降排序 冒泡
        function sort2(){
            for(var i = 0;i<$("tbody tr").length-1;i++) {
                for(var j = 0;j<$("tbody tr").length-i-1;j++){
                    var stringMax = $("tbody tr:eq("+j+")").find(".product_sort").val();
                    var stringMin = $("tbody tr:eq("+(j+1)+")").find(".product_sort").val();
                    var intMax = parseInt(stringMax);
                    var intMin = parseInt(stringMin);
                    if(isNaN(intMax)) intMax = -99999;
                    if(intMax<intMin){
                        //把小的数字放到后面
                        $("tbody tr:eq("+j+")").insertAfter($("tbody tr:eq("+(j+1)+")"));
                    }
                }
            }
        }
        var sortFlag = 1;

        $(function () {
            //点击排序
            $("thead tr th:eq(1)").click(function(){

                if(sortFlag==1){
                    sort1();
                    sortFlag = 0;
                }else{
                    sort2();
                    sortFlag = 1;
                }
            });
        });
    </script>
</head>
<body>
<div class="col-sm-5"><h4 class="pull-right"></h4></div>

<div class="col-sm-2">
    <table class="table">
        <thead>
        <tr>
            <th>ID</th>
            <th>排序</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>
                1
            </td>

            <td>
                <input type="text" value="30" class="product_sort" placeholder="输入 排序">
            </td>

        </tr>

        <tr>
            <td>
                2
            </td>

            <td>
                <input type="text" value="" class="product_sort" placeholder="输入 排序">
            </td>

        </tr>

        <tr>
            <td>
                3
            </td>

            <td>
                <input type="text" value="😄" class="product_sort" placeholder="输入 排序">
            </td>

        </tr>

        <tr>
            <td>
                4
            </td>

            <td>
                <input type="text" value="-100" class="product_sort" placeholder="输入 排序">
            </td>

        </tr>

        <tr>
            <td>
                5
            </td>

            <td>
                <input type="text" value="" class="product_sort" placeholder="输入 排序">
            </td>

        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

用浏览器打开html文件，得如图所示

 

 点击表头的排序，就可以对该列进行排序，可升序和降序，值如果不是数字全部放到后面

var stringMax = $("tbody tr:eq("+j+")").find(".product_sort").val();
var stringMin = $("tbody tr:eq("+(j+1)+")").find(".product_sort").val();

在冒泡排序里面，stringMax为当前值，stringMin为下一个要比较的值，这里获取输入框的值，自行修改来用在其他地方。

posted @ 2019-12-04 20:32  Python++  阅读(274)  评论(0)  编辑  收藏  举报