Только первая таблица сортируется с JavaScript

Question

У меня есть три таблицы на странице. Должна быть сортировка по некоторому значению (в моем случае это год).

<table id="table1">
  <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Year</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Smith</td>
    <td>2010</td>
  </tr>
  <tr>
    <td>Pete</td>
    <td>Brown</td>
    <td>2015</td>
  </tr>
  <tr>
    <td>Ann</td>
    <td>Lee</td>
    <td>2005</td>
  </tr>
</table>

<table id="table2">
  <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Year</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Smith</td>
    <td>2010</td>
  </tr>
  <tr>
    <td>Pete</td>
    <td>Brown</td>
    <td>2015</td>
  </tr>
  <tr>
    <td>Ann</td>
    <td>Lee</td>
    <td>2005</td>
  </tr>
</table>

<script>
  let sortedRows = Array.from(table1.rows)
    .slice(1)
    .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);
  table1.tBodies[0].append(...sortedRows);
</script>
<script>
  let sortedRows = Array.from(table2.rows)
    .slice(1)
    .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);
  table2.tBodies[0].append(...sortedRows);
</script>
<script>
  let sortedRows = Array.from(table3.rows)
    .slice(1)
    .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);
  table3.tBodies[0].append(...sortedRows);
</script>

Однако, только первая таблица сортируется правильно, тогда как сортировка во второй и третьей таблицах не работает. В чем причина и как ее можно решить? Извините за нелепый вопрос.

Answer 1

Вы получили исключение: Uncaught SyntaxError: Identifier 'sortedRows' has already been declared. Вам нужно удалить второй и третий let до sortedRows:

    let sortedRows = Array.from(table1.rows)
      .slice(1)
      .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);
    table1.tBodies[0].append(...sortedRows);
    sortedRows = Array.from(table2.rows)
      .slice(1)
      .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);
    table2.tBodies[0].append(...sortedRows);
    sortedRows = Array.from(table3.rows)
      .slice(1)
      .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);
    table3.tBodies[0].append(...sortedRows);

<table id="table1">
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
      <td>2010</td>
    </tr>
    <tr>
      <td>Pete</td>
      <td>Brown</td>
      <td>2015</td>
    </tr>
    <tr>
      <td>Ann</td>
      <td>Lee</td>
      <td>2005</td>
    </tr>
  </table>

  <table id="table2">
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
      <td>2010</td>
    </tr>
    <tr>
      <td>Pete</td>
      <td>Brown</td>
      <td>2015</td>
    </tr>
    <tr>
      <td>Ann</td>
      <td>Lee</td>
      <td>2005</td>
    </tr>
  </table>

  <table id="table3">
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>John</td>
      <td>Smith</td>
      <td>2010</td>
    </tr>
    <tr>
      <td>Pete</td>
      <td>Brown</td>
      <td>2015</td>
    </tr>
    <tr>
      <td>Ann</td>
      <td>Lee</td>
      <td>2005</td>
    </tr>
  </table>

Tables 2 and 3 with id's table2 and table3 are same.