如何使用每个单元格文本内容的切片对表格进行升序排序

Question

所以我尝试创建一个函数，根据每行的第一个单元格（不包括第一行）对表格进行排序 元素的文本值是表单输入的值，它必须是 (AA111) 两个字母和 3 个数字

它必须根据上一行的第一个单元格的文本内容（在此表达式 AA111 中）的数字（在此表达式 111 中）的值（如果该单元格有一个更大的价值）

AAAH 并且此表每次都可以扩展，因为它有一个按钮调用一个函数，每次单击此按钮时都会添加具有不同值的新行

我尝试使用 for 循环收集每一行，然后收集第一个单元格的值，然后执行

.slice(2);

然后用

Number()

将其转换为数字，但这似乎是一个问题，因为它不起作用 这是我的功能

function Sort() {
  let table = document.getElementById('add'); //table id
  let row = table.rows;
  let switching = true;
  let tmp0 = new Array();
  tmp0.length = row.length;
  let tmp1 = new Array();
  tmp1.length = row.length;
  let tmp2 = new Array();
  tmp2.length = row.length;
  let ech;
  while (switching) {
    switching = false;
    for (var i = 1; i < row.length - 1; i++) {
      tmp0[i] = row[i].cells[0].innerText; /* collecting the intire content from the 1st cell of each row then         turning it into a number*/
      tmp1[i] = tmp0[i].slice(2);
      tmp2[i] = Number(tmp1[i]);
      if (tmp2[i] > tmp2[i + 1]) // swicthing the values if the 1st one is greater
      {
        ech = row[i].innerHTML;
        row[i].innerHTML = row[i + 1].innerHTML;
        row[i + 1].innerHTML = ech;
        switching = true;
      }
    }
  }
}

我尝试删除

if

条件和

.slice

部分来尝试看看问题出在哪里

function Sort() {
  let table = document.getElementById('add');
  let switching = true;
  let row = table.rows;
  while (switching) {
    switching = false;
    for (var i = 1; i < row.length; i++) {
      ech = row[i].innerHTML;
      row[i].innerHTML = row[i + 1].innerHTML;
      row[i + 1].innerHTML = ech;
      switching = true;
    }
  }
}

这个

while

循环实际上正在工作，因为每次我按下与此功能链接的按钮时，它都会更改单元格的值

我收集值的方式是错误的还是使用了切片或只是所有内容

请帮我看看错误

Answer 1

将表行转换为数组，并使用内置的

sort()

方法和比较函数来提取所需的切片。

然后您可以更新表以包含按排序顺序的行。

function Sort() {
  let table = document.getElementById('add'); //table id
  let rows = [...table.rows].slice(1); // skip header row
  rows.sort((row1, row2) => Number(row1.cells[0].slice(2)) - Number(row2.cells[0].slsice(2)));
  rows.forEach(row => row.remove()); // Remove from original table position
  rows.forEach(row => table.appendChild(row)); // Add back in new order
}