用javascript对表格中的数字进行排序

Question

我想按降序对我的表 ID 编号进行排序。 当用户单击排序文本时，排序必须有效，但我找不到此问题的解决方案。 这是我的JS代码... 还有一个问题：删除表格行时，删除函数不会删除最后一个 tr 元素。

$(function(){
    var tableHead =
        "<table>" +
            "<tr>" +
             "<th class='sort'>Id sort</th><th>Name</th><th>Surname</th><th>Birthday</th><th>Filter</th><th class='addList'>+</th>" +
            "</tr>" +
        "</table>";

    $('body').html(tableHead);

    var name = "<input type='text' class='name' placeholder='First name'>";
    var surname = "<input type='text' class='surname' placeholder='Surname'>";
    var bDayDate ="<input type='date' class='bDayDate' placeholder='Bday'>";
    var del = "Delete";
    var addList = $('.addList');
    var idNum = 0;
    var arrNum= [];

    addList.on("click", function(){
        idNum++;
       var tr = $("<tr></tr>");

        for(var i = 0; i < 6; i++){
            var td = $("<td></td>");
            tr.append(td);

            switch (i){
                case 0:
                    td.addClass('num' + idNum);
                    td.html(idNum);
                break;
                case 1: td.html(name);
                break;
                case 2: td.html(surname);
                break;
                case 3: td.html(bDayDate);
                break;
                case 4: td.html(1);
                break;
                case 5:
                    td.addClass('delete');
                    td.html(del);
                break;
                default:
                    return "OooPs!!";
            }
        }

        $('.sort').on("click", function(){
            arrNum.push(idNum);
            arrNum.sort(function(a, b){return b - a});
            for(var j = 0; j < arrNum.length; j++){
                $('.num'+j).html(arrNum[j])
            }
        });

        $('.delete').on("click", function(){
           $(this).parent().remove();

        });

        $('table').append(tr);
    });

});

Answer 1

您的脚本中有多个问题，但您询问的是（排序）。

arrNum.push(idNum); - 点击排序时调用一次

要修复它，请在 addList 中单击关闭。

您的最后一行问题来自于您在实际附加行之前添加了删除事件。

排序的另一个最后一行问题与您从 1 开始计算元素的事实有关，而您的循环从 0 开始 ($('.num'+j).html(arrNum[j]) ->需要加一个+1）。

以下代码可以解决您所问的所有问题：

$(function(){
    var tableHead =
        "<table>" +
            "<tr>" +
             "<th class='sort'>Id sort</th><th>Name</th><th>Surname</th><th>Birthday</th><th>Filter</th><th class='addList'>+</th>" +
            "</tr>" +
        "</table>";

    $('body').html(tableHead);

    var name = "<input type='text' class='name' placeholder='First name'>";
    var surname = "<input type='text' class='surname' placeholder='Surname'>";
    var bDayDate ="<input type='date' class='bDayDate' placeholder='Bday'>";
    var del = "Delete";
    var addList = $('.addList');
    var idNum = 0;
    var arrNum= [];

    addList.on("click", function(){
        idNum++;
        arrNum.push(idNum);
       var tr = $("<tr></tr>");

        for(var i = 0; i < 6; i++){
            var td = $("<td></td>");
            tr.append(td);

            switch (i){
                case 0:
                    td.addClass('num' + idNum);
                    td.addClass('numHere');
                    td.html(idNum);
                break;
                case 1: td.html(name);
                break;
                case 2: td.html(surname);
                break;
                case 3: td.html(bDayDate);
                break;
                case 4: td.html(1);
                break;
                case 5:
                    td.addClass('delete');
                    td.html(del);
                break;
                default:
                    return "OooPs!!";
            }
        }        

        $('table').append(tr);               

        $('.delete').on("click", function() {
           $(this).parent().remove();
        });
    });
    
    $('.sort').on("click", function(){    
      arrNum.sort(function(a, b){return b - a});
      for(var j = 0; j < arrNum.length; j++){
        $('.num'+(j + 1)).html(arrNum[j])
      }
    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

但是：还有其他重要的问题。例如，您每次单击“+”时都在添加事件。结果是，如果您添加 99999 行，您将在单击排序时进行 99999 次排序（只需添加一个 console.log 并检查 :)）。结果是正确的，但是您正在无用地杀死资源。我的建议是，如果你真正想要使用的东西，请稍微重写一下。如果是作业什么的……没关系。