JavaScript 表行 - 删除，通过数组排序，放回正确的位置

JavaScript table rows - Remove, sort via array, place back in at correct positions

本文关键字：位置 表行 删除 JavaScript 数组排序      更新时间：2023-09-26

我正在为我的工作场所制作一个基本的Web应用程序，其中PHP脚本从sql数据库中检索数千行，并将数据放在JavaScript对象中，供我在前端控制。

我已经设法做到了以上所有，没问题。

HTML 表中有几千行（包含结果）。

JavaScript 脚本动态更改各个 s 的类，具体取决于它们所在的"列"。

我可以检索所有具有特定类名的 '，没问题，然后将每个 s 的 innerHTML 存储在数组中，并对它进行排序，但是我如何从表中删除它们所在的行，相对于 s innerHTML 对行进行排序，然后将行放回表中？

同样，我知道如何检索相关的数据，对数据进行排序，同时对行应该放置的位置进行排序（使用另一个数组） - 但是我如何使用这个数组，它保存行"NEW"位置，并实际将其应用于表？

我想只用JavaScript来做这一切 - 我宁愿不使用JQuery。如果您从其父元素中删除一个元素 - 删除的子元素实际上会破坏，还是我可以从表中删除所有行，对它们进行排序，然后将它们放回？

愚蠢的问题！我只是没有勇气尝试。

我自己回答。

这是我做的函数：

其中 table 指向 table 元素，className 是您希望对行进行排序的 td 的类，升序是布尔变量（真/假）：

function sortRows(className,ascending)
{
    var rows = table.getElementsByTagName('tr');
    var elements = [];
    // PLACE ROW ELEMENTS IN AN ARRAY, AS .getElements RETURNED ARRAYS CAN'T BE SORTED
    for(r=2;r<rows.length;r+=1){elements.push(rows[r]);}
    elements.sort(function(a,b){
                                    // SORT FUNCTION
    var x = a.getElementsByClassName("name")[0].innerHTML;  // VALUE IN 'NAME' <td> OF ROW A
    var y = b.getElementsByClassName("name")[0].innerHTML;  // VALUE IN 'NAME' <td> OF ROW B
    var c = a.getElementsByClassName(className)[0];         // VALUE IN className <td> OF ROW A
    var d = b.getElementsByClassName(className)[0];         // VALUE IN className <td> OF ROW B
    if(c){e = c.innerHTML;}                                 // MAKE SURE VALUE EXISTS IN DYNAMIC className CLASSED <td> A           
    if(d){f = d.innerHTML;}                                 // MAKE SURE VALUE EXISTS IN DYNAMIC className CLASSED <td> B           
    if(isNaN(e)+isNaN(f))                                   // CHECK IF EITHER THE FIRST OR SECOND DYNAMIC VALUES ARE TEXT - IF SO, SORT ALPHABETICALLY
    {
        e=e.toLowerCase();
        f=f.toLowerCase();
        if(ascending==1){return(([e,f].sort().reverse()[0] == e)*2-1)}else {return(([e,f].sort()[0] == e)*2-1)};    // IF SO, SORT ALPHABETICALLY ascending OR descending
    }
    else if(e==f)                                           // IF VALUES ARE real VALUES, AND BOTH THE SAME, SORT BY 'NAME' <td> OF ROWS A AND B
    {
        return(([x,y].sort().reverse()[0] == x)*2-1);
    }
    else if(ascending){return e-f;}else{return f-e;}        // ELSE, SORT BY VALUES IN DYNAMICALLY RETRIEVED <td> FOR A AND B
    }
    );
                                    // REMOVE ELEMENTS FROM TABLE
    for(e=0;e<elements.length;e+=1)
    {table.removeChild(table.childNodes[2]);}
                                    // PLACE ELEMENTS BACK IN, ORDERED
    for(r=0;r<elements.length;r+=1)
    {table.appendChild(elements[r]);}
}
相关文章：