当前位置: 代码迷 >> JavaScript >> 尽可能轻松地对数组中的行进行排序(Javascript)
  详细解决方案

尽可能轻松地对数组中的行进行排序(Javascript)

热度:89   发布时间:2023-06-05 16:26:46.0

我有这个包含 750 行信息的表格。 它使用php提取。 但是,在我弹出此图像的行之一中,图像 src 将为 1.jpg 或 0.jpg。 这将在这两张图片之间进行选择。

那么我怎么可能在它显示的图片之后对这一行进行排序,以及如何使代码尽可能简单,以确保使用网站订购该行的计算机不会花费很长时间/努力。 (当然使用 Javascipt)

因此,代码应该再次对行进行排序,例如将带有 <img src="0.jpg" /> 的 td 首先放置,然后将 td 与 <img src="1.jpg" / > 最后。 对它们进行排序。

示例代码:

<table>
  <tbody>
    <tr>
      <th>Name</th>
      <th>Checked or unchecked</th>
    </tr>
    <tr>
      <td>Name1</td>
      <td><img src="1.jpg" /></td>
    </tr>
    <tr>
      <td>Name2</td>
      <td><img src="0.jpg" /></td>
    </tr>
  </tbody>
</table>

您可以使用此功能:

function sortCol(desc) {
  const tbl = document.querySelector("table>tbody");
  const rows = Array.from(tbl.rows).slice(1).sort((a, b) =>
    a.querySelector("img").src.localeCompare(b.querySelector("img").src)
  );
  if (desc) rows.reverse();
  rows.forEach(row => tbl.appendChild(row));
}

当您想要降序排序时,使用参数true调用它。 如果页面上有多个表格,则需要在函数开头限定选择器以定位正确的表格。

  相关解决方案