Chrome上的JS表排序失敗-有解無憂

我正在開發一個網站，該網站允許人們參加關于 erg 賽艇運動員的在線比賽。

我顯示了一個包含排名、名稱和其他欄位的大表（600 多行），并且我希望允許訪問者對其進行動態排序（客戶端 JS）。
我設定了一個在 Firefox 上運行良好的功能，但在 Chrome 瀏覽器上根本不起作用。

我真的看不出我的代碼的哪一部分會帶來這個問題，這就是我向你尋求幫助的原因！

我的 html 代碼如下所示：

<table>
  <thead>
    <tr>
      <th>Rank</th>
      <th>Name</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>USER 1</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

還有我的 JavaScript：

for (const table of document.getElementsByTagName('table')) {
  const headers = table.querySelectorAll('thead tr th');
  for (let i = 0; i < headers.length-1; i  ) {
    headers[i].addEventListener('click', sortTable(i, table.id));
  }
}

function sortTable(n, tableId) {
  return () => {
    const table = document.getElementById(tableId);

    const newTable = document.createElement('table');
    newTable.className = table.className;
    newTable.id = table.id;

    const tbody = document.createElement('tbody');
    const thead = document.createElement('thead');

    const rows = Array.from(table.rows);
    thead.appendChild(rows.shift());
    const th = thead.getElementsByTagName('th');

    const dir = th[n].className == 'asc' ? 'desc' : 'asc';

    rows.sort((a, b) => {
      let x = a.getElementsByTagName('td')[n].innerText.toLowerCase();
      let y = b.getElementsByTagName('td')[n].innerText.toLowerCase();

      const compare = x.localeCompare(y, 'fr', { sensitivity: 'base', numeric: true });

      return ((dir == 'asc' && compare > 0) || (dir == 'desc' && compare < 0));
    })
      .forEach(row => tbody.appendChild(row));

    for (const header of th) {
      header.className = '';
    }

    th[n].className = dir;

    newTable.appendChild(thead);
    newTable.appendChild(tbody);

    table.parentNode.replaceChild(newTable, table);
  };
}

謝謝你的幫助！

uj5u.com熱心網友回復：

您傳遞給的比較函式.sort()回傳一個布林值：

return ((dir == 'asc' && compare > 0) || (dir == 'desc' && compare < 0));

但是，該.sort()方法期望此比較函式回傳一個數字。我懷疑 Firefox 正在寬容或為你做一些型別轉換，而 Chrome 沒有。如果我將其更改為：

return ((dir == 'asc' && 0   compare) || (dir == 'desc' && 0 - compare));

...它將按預期排序。

for (const table of document.getElementsByTagName('table')) {
  const headers = table.querySelectorAll('thead tr th');
  for (let i = 0; i < headers.length - 1; i  ) {
    headers[i].addEventListener('click', sortTable(i, table.id));
  }
}

function sortTable(n, tableId) {
  return () => {
    const table = document.getElementById(tableId);

    const newTable = document.createElement('table');
    newTable.className = table.className;
    newTable.id = table.id;

    const tbody = document.createElement('tbody');
    const thead = document.createElement('thead');

    const rows = Array.from(table.rows);
    thead.appendChild(rows.shift());
    const th = thead.getElementsByTagName('th');

    const dir = th[n].className == 'asc' ? 'desc' : 'asc';

    rows.sort((a, b) => {
        let x = a.getElementsByTagName('td')[n].innerText.toLowerCase();
        let y = b.getElementsByTagName('td')[n].innerText.toLowerCase();

        const compare = x.localeCompare(y, 'fr', {
          sensitivity: 'base',
          numeric: true
        });

        return ((dir == 'asc' && 0   compare) || (dir == 'desc' &&  0 - compare));
      })
      .forEach(row => tbody.appendChild(row));

    for (const header of th) {
      header.className = '';
    }

    th[n].className = dir;

    newTable.appendChild(thead);
    newTable.appendChild(tbody);

    table.parentNode.replaceChild(newTable, table);
  };
}

<table id="mytable">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>USER 1</td>
    </tr>
    <tr>
      <td>3</td>
      <td>USER 3</td>
    </tr>
    <tr>
      <td>2</td>
      <td>USER 2</td>
    </tr>
    <tr>
      <td>4</td>
      <td>USER 4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>USER 5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>USER 6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>USER 7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>USER 8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>USER 9</td>
    </tr>
    <tr>
      <td>10</td>
      <td>USER 10</td>
    </tr>
    <tr>
      <td>11</td>
      <td>USER 11</td>
    </tr>
    <tr>
      <td>12</td>
      <td>USER 12</td>
    </tr>
    <tr>
      <td>13</td>
      <td>USER 13</td>
    </tr>
    <tr>
      <td>14</td>
      <td>USER 14</td>
    </tr>
    <tr>
      <td>15</td>
      <td>USER 15</td>
    </tr>
    <tr>
      <td>16</td>
      <td>USER 16</td>
    </tr>
    <tr>
      <td>17</td>
      <td>USER 17</td>
    </tr>
    <tr>
      <td>18</td>
      <td>USER 18</td>
    </tr>
    <tr>
      <td>19</td>
      <td>USER 19</td>
    </tr>
    <tr>
      <td>20</td>
      <td>USER 20</td>
    </tr>
    <tr>
      <td>21</td>
      <td>USER 21</td>
    </tr>
    <tr>
      <td>22</td>
      <td>USER 22</td>
    </tr>
    <tr>
      <td>23</td>
      <td>USER 23</td>
    </tr>
    <tr>
      <td>24</td>
      <td>USER 24</td>
    </tr>
    <tr>
      <td>25</td>
      <td>USER 25</td>
    </tr>
    <tr>
      <td>26</td>
      <td>USER 26</td>
    </tr>
    <tr>
      <td>27</td>
      <td>USER 27</td>
    </tr>
    <tr>
      <td>28</td>
      <td>USER 28</td>
    </tr>
    <tr>
      <td>29</td>
      <td>USER 29</td>
    </tr>
    <tr>
      <td>30</td>
      <td>USER 30</td>
    </tr>
  </tbody>
</table>

（作為參考，這里是原始版本，其中只回傳了一個布林值，并且排序根本不起作用）：

for (const table of document.getElementsByTagName('table')) {
  const headers = table.querySelectorAll('thead tr th');
  for (let i = 0; i < headers.length - 1; i  ) {
    headers[i].addEventListener('click', sortTable(i, table.id));
  }
}

function sortTable(n, tableId) {
  return () => {
    const table = document.getElementById(tableId);

    const newTable = document.createElement('table');
    newTable.className = table.className;
    newTable.id = table.id;

    const tbody = document.createElement('tbody');
    const thead = document.createElement('thead');

    const rows = Array.from(table.rows);
    thead.appendChild(rows.shift());
    const th = thead.getElementsByTagName('th');

    const dir = th[n].className == 'asc' ? 'desc' : 'asc';

    rows.sort((a, b) => {
        let x = a.getElementsByTagName('td')[n].innerText.toLowerCase();
        let y = b.getElementsByTagName('td')[n].innerText.toLowerCase();

        const compare = x.localeCompare(y, 'fr', {
          sensitivity: 'base',
          numeric: true
        });

        return ((dir == 'asc' && compare > 0) || (dir == 'desc' && compare < 0));
      })
      .forEach(row => tbody.appendChild(row));

    for (const header of th) {
      header.className = '';
    }

    th[n].className = dir;

    newTable.appendChild(thead);
    newTable.appendChild(tbody);

    table.parentNode.replaceChild(newTable, table);
  };
}

<table id="mytable">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>USER 1</td>
    </tr>
    <tr>
      <td>3</td>
      <td>USER 3</td>
    </tr>
    <tr>
      <td>2</td>
      <td>USER 2</td>
    </tr>
    <tr>
      <td>4</td>
      <td>USER 4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>USER 5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>USER 6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>USER 7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>USER 8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>USER 9</td>
    </tr>
    <tr>
      <td>10</td>
      <td>USER 10</td>
    </tr>
    <tr>
      <td>11</td>
      <td>USER 11</td>
    </tr>
    <tr>
      <td>12</td>
      <td>USER 12</td>
    </tr>
    <tr>
      <td>13</td>
      <td>USER 13</td>
    </tr>
    <tr>
      <td>14</td>
      <td>USER 14</td>
    </tr>
    <tr>
      <td>15</td>
      <td>USER 15</td>
    </tr>
    <tr>
      <td>16</td>
      <td>USER 16</td>
    </tr>
    <tr>
      <td>17</td>
      <td>USER 17</td>
    </tr>
    <tr>
      <td>18</td>
      <td>USER 18</td>
    </tr>
    <tr>
      <td>19</td>
      <td>USER 19</td>
    </tr>
    <tr>
      <td>20</td>
      <td>USER 20</td>
    </tr>
    <tr>
      <td>21</td>
      <td>USER 21</td>
    </tr>
    <tr>
      <td>22</td>
      <td>USER 22</td>
    </tr>
    <tr>
      <td>23</td>
      <td>USER 23</td>
    </tr>
    <tr>
      <td>24</td>
      <td>USER 24</td>
    </tr>
    <tr>
      <td>25</td>
      <td>USER 25</td>
    </tr>
    <tr>
      <td>26</td>
      <td>USER 26</td>
    </tr>
    <tr>
      <td>27</td>
      <td>USER 27</td>
    </tr>
    <tr>
      <td>28</td>
      <td>USER 28</td>
    </tr>
    <tr>
      <td>29</td>
      <td>USER 29</td>
    </tr>
    <tr>
      <td>30</td>
      <td>USER 30</td>
    </tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

a.getElementsByTagName('td')是一個非常昂貴的操作，在每次比較期間呼叫它會很慢。

表格行有一個cells包含所有td和th元素的屬性，您可以使用它來代替。

      let x = a.cells[n].innerText.toLowerCase();
      let y = b.cells[n].innerText.toLowerCase();

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/474079.html

標籤：javascript 排序谷歌浏览器 html表客户端

上一篇：Python：獲取陣列中的最大出現次數

下一篇：將JavaScript陣列資料轉換為json檔案