追加 jQuery/Javascript 后排序表

Question

下面是我的代码，当点击添加按钮到我的表格时，我的问题是，有没有办法在table.append 之后根据ItemId 对表格进行排序？

    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);

编辑，请看下面我想要实现的截图： 我希望我的表格按突出显示的列排序，他们有什么方法可以在单击添加/编辑后对整个表格进行排序？

Answer 1

感谢您的 cmets，我能够通过在附加的末尾添加一个排序函数来解决这个问题。

请在下面找到我的代码，我在追加后调用了这个函数。

function sortTable() {
        var table, rows, switching, i, x, y, shouldSwitch;
        table = document.getElementById("tblItemList");
        switching = true;
        /*Make a loop that will continue until
        no switching has been done:*/
        while (switching) {
            //start by saying: no switching is done:
            switching = false;
            rows = table.rows;
            /*Loop through all table rows (except the
            first, which contains table headers):*/
            for (i = 1; i < (rows.length - 1); i++) {
                //start by saying there should be no switching:
                shouldSwitch = false;
                /*Get the two elements you want to compare,
                one from current row and one from the next:*/
                x = rows[i].getElementsByTagName("TD")[8];
                y = rows[i + 1].getElementsByTagName("TD")[8];

                var cmpX = isNaN(parseInt(x.innerHTML)) ? x.innerHTML.toLowerCase() : parseInt(x.innerHTML);
                var cmpY = isNaN(parseInt(y.innerHTML)) ? y.innerHTML.toLowerCase() : parseInt(y.innerHTML);
                cmpX = (cmpX == '-') ? 0 : cmpX;
                cmpY = (cmpY == '-') ? 0 : cmpY;
                //check if the two rows should switch place:
                if (cmpX > cmpY) {
                    //if so, mark as a switch and break the loop:
                    shouldSwitch = true;
                    break;
                }
            }
            if (shouldSwitch) {
                /*If a switch has been marked, make the switch
                and mark that a switch has been done:*/
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
            }
        }
    }

Answer 2

在 jQuery 中，您可以通过 detach、sort 和 append 重新排序元素。

正如其他答案中提到的，为元素提供相同的 ID 会导致问题，尽管您可以通过使用 classes 轻松解决此问题。

这里有一些示例代码：

$('button.add-item').on('click', function() {
  let item_id = (Math.random()+'').slice(-4);

  $('table').append(`
    <tr>
      <td class="item-id hidden">
        ${item_id}
      </td>
      <td class="item-code-edit">
        <input value="${item_id}" disabled>
      </td>
      <td class="item-cost align-right">
        ${parseFloat(Math.random() * 1000).toFixed(2)}
      </td>
      <td class="item-uofm">
        ItemUOM 
      </td>
      <td class="location-id hidden">
        LocationId
      </td>
      <td class="location-code">
        LocationCode
      </td>
      <td class="unit-cost-parse align-right">
        UnitCostParse
      </td>
      <td class="total align-right">
        Total2
      </td>
      <td>
        <div class="buttons">
          <button class="edit-item btn btn-default btn-xs glyphicon glyphicon-edit">EDIT</button>
          <button class="remove-item btn btn-default btn-xs glyphicon glyphicon-trash">REMOVE</button>
        </div>
      </td>
   </tr>`);
   
   //this is the code that does the re-ordering
   $('table').append($('table').find('tr').detach().sort((a, b) =>
     $(a).find('.item-id').text() - $(b).find('.item-id').text()));
 });
 
 $('table')
   .on('click', 'button.edit-item', function() {
     let $id_input = $(this).parents('tr').find('.item-code-edit input');
     $id_input.prop('disabled', !$id_input.prop('disabled'));
   })
   .on('click', 'button.remove-item', function() {
     $(this).parents('tr').remove();
 });

.align-right{
  text-align: right;}

.hidden{
  display: none;}
  
.item-code-edit input{
  width: 40px;}

table td{
  min-width: 64px;}

<button class="add-item">ADD ITEM</button>
<table></table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

由于您附加到名为 tblItemList 的内容，我假设您想要对数据结构而不是实际元素进行排序。

    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>

请注意，您多次使用相同的id，这会导致 HTML 无效。虽然这个问题是可以解决的，但您可能也想解决它。

Answer 4

您可以使用append、prepend和after方法移动节点。

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

原版 javascript 的伪代码：

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

对于 JQuery (https://api.jquery.com/after/)：

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

当然，您不需要 id 来匹配节点。您可以使用任何其他方式搜索节点。