Below is my code, when clicking add button to my table, my question is, are there ways to sort the table based on ItemId after table.append?

    var ItemList = "<tr><td hidden id='ItemIdEdit'>"  
    ItemId  
    "</td><td id='ItemCodeEdit'>"  
    ItemCode  
    "</td><td style='text-align: right'>"  

    parseFloat(Quantity).toFixed(2)  
    "</td><td id='ItemUOM2'>"  


    ItemUOM  
    "</td><td hidden>"  
    LocationId  
    "</td><td>"  
    LocationCode  
    "</td><td style='text-align: right'>"  
    UnitCostParse  
    "</td><td style='text-align: right' >"  

    Total2  
    "</td><td><div class='buttons'> <a href='#' class='btn btn-default btn-xs glyphicon glyphicon-edit' id='btnEdit'onclick='EditItem(this)'></div></td><td><div class='buttons'><a href='#' class='btn btn-default btn-xs glyphicon glyphicon-trash' id='btnAddToList'onclick='RemoveItem(this)'></a></div></td></tr>";

tblItemList.append(ItemList);

CodePudding user response：

You can use the methods append, prepend and after to move the nodes.

https://developer.mozilla.org/en-US/docs/Web/API/Element/append

Pseudo code for vanilla javascript:

document.getElementById("yourTableIdOrTbody").append(document.getElementById("yourTrToMOveToTheEnd"));
document.getElementById("yourTableIdOrTbody").prepend(document.getElementById("yourTrToMOveToTheBegin"));
document.getElementById("trIdBase").after(document.getElementById("yourTrToMOveToAfterTrBase"));

For JQuery (https://api.jquery.com/after/):

$("#yourTableIdOrTbody").append($("#yourTrToMOveToTheEnd"));
$("#yourTableIdOrTbody").prepend($("#yourTrToMOveToTheBegin"));
$("#trIdBase").after($("#yourTrToMOveToAfterTrBase"));

Of course you don't need to have the id's to match the nodes. You can search the nodes using any other way.

CodePudding user response：

Since you append to something called tblItemList, I assume you want to sort a data-structure and not actual elements.

    let tblItemList = [];
    var ItemList = "<tr><td hidden id='ItemIdEdit'>"  
    2  
    "</td><td id='ItemCodeEdit'>"  
    2  
    "</td><td style='text-align: right'>"  

    parseFloat(2).toFixed(2)  
    "</td><td id='ItemUOM2'>"  


    2  
    "</td><td hidden>"  
    2  
    "</td><td>"  
    2  
    "</td><td style='text-align: right'>"  
    2  
    "</td><td style='text-align: right' >"  

    2  
    "</td><td><div class='buttons'> <a href='#' class='btn btn-default btn-xs glyphicon glyphicon-edit' id='btnEdit'onclick='EditItem(this)'></div></td><td><div class='buttons'><a href='#' class='btn btn-default btn-xs glyphicon glyphicon-trash' id='btnAddToList'onclick='RemoveItem(this)'></a></div></td></tr>";

tblItemList.push(ItemList);
    ItemList = "<tr><td hidden id='ItemIdEdit'>"  
    1  
    "</td><td id='ItemCodeEdit'>"  
    2  
    "</td><td style='text-align: right'>"  

    parseFloat(2).toFixed(2)  
    "</td><td id='ItemUOM2'>"  


    2  
    "</td><td hidden>"  
    2  
    "</td><td>"  
    2  
    "</td><td style='text-align: right'>"  
    2  
    "</td><td style='text-align: right' >"  

    2  
    "</td><td><div class='buttons'> <a href='#' class='btn btn-default btn-xs glyphicon glyphicon-edit' id='btnEdit'onclick='EditItem(this)'></div></td><td><div class='buttons'><a href='#' class='btn btn-default btn-xs glyphicon glyphicon-trash' id='btnAddToList'onclick='RemoveItem(this)'></a></div></td></tr>";

tblItemList.push(ItemList);
for (let i = 0; i < tblItemList.length; i  ) {
    for (let j = i   1; j < tblItemList.length; j  ) {
        let itemI = parseInt($(tblItemList[i]).find("#ItemIdEdit").text());
        let itemJ = parseInt($(tblItemList[j]).find("#ItemIdEdit").text());
        if (itemI > itemJ) {
            let aux = tblItemList[i];
            tblItemList[i] = tblItemList[j];
            tblItemList[j] = aux;
        }
    }
}

console.log(tblItemList);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Note that you use the same id multiple times, which causes invalid HTML. The issue is solvable though, but you might want to fix that as well.