根据数据集值定位表行

Question

我正在处理一个可排序的表。每列都有一个按钮，用于为每一行赋予相应的data-position 值。例如，通过单击按字母升序对行进行排序的按钮，我可以将数据集从 1 到 n 分配给这些行中的每一行。当我单击另一个按钮按另一个参数排序时，我会重新分配这些数据集。

现在唯一的问题是我的行停留在一个地方并且不改变它们的位置。我想我可以通过 CSS 定位来做到这一点，但不确定如何。

这是我为现有表行分配这些数据集的方式：

data.sort((a, b) => {
        if (a[dataId] === b[dataId]) {
            return 0;
        }
        return (a[dataId] > b[dataId]) ? -1 : 1;
    }).forEach((val, position) => {
        table.querySelector(`.${val.id}`).setAttribute('data-position', position + 1);
    });

Answer 1

这是我对表格进行排序的方式。
我希望你能关注并看看它做了什么，并为你的使用进行修改。

// TableSort

function sortTable(tableElement, firstRow, colIndex, colType, reverseSort, toFixed2) {
  var rowColValue=[];
  for(var r=firstRow;r<tableElement.tBodies[0].rows.length;r++) {
    var rowId="row"+r.toString();
    tableElement.tBodies[0].rows[r].id=rowId;
    var cellValue=tableElement.tBodies[0].rows[r].cells[colIndex].innerText;
    if(colType=="Number") {
      if(cellValue=="—") cellValue="";
      else if(toFixed2) {
        if(cellValue.includes(".")) {
          if(cellValue.split(".")[1].length==1) tableElement.tBodies[0].rows[r].cells[colIndex].innerText+="0";
        } else {
          tableElement.tBodies[0].rows[r].cells[colIndex].innerText+=".00";
        };
      }
      cellValue=Number(cellValue.split(",").join(""));
    }
    rowColValue.push([rowId, cellValue]);
  }
  rowColValue.sort((a, b) => {
    var retVal=0;
    if(a[1]<b[1]) retVal=-1;
    else if(a[1]>b[1]) retVal=1;
    return retVal;
  });
  if(reverseSort) rowColValue.reverse();
  for(var rcv=0;rcv<rowColValue.length;rcv++) {
    tableElement.tBodies[0].rows[0].parentNode.appendChild(document.getElementById([rowColValue[rcv][0]]));
  }
}

表格元素是表格id或document.getElementById("table-id-here")。
第一行：如果有标题，使用 1（如果我没记错的话），如果没有，使用 0。
列索引：...
Col 类型：如果是数字，则处理混合 2、2.0、2.00...
reverseSort：真或假...
固定2：对于从 7 到 7.00、2.4 到 2.40 等的数字，为 true 或 false。
基本上，附加现有行会将其发送到底部。