1

Есть таблица и скрипт сортировки, все строки сортируются без каких либо ошибок и проблем, пока в неё не добавить новую строку с данными, первый раз append добавляет данные и они правильно сортируются, но ошибку браузер выдает: Ошибка

При 2-м и более добавлении строк, все следующие строки не сортируются и браузер все так же выдает ошибку, как это исправить?

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <style>
    table {
      border-spacing: 0;
      width: 100%;
      border: 1px solid #ddd;
    }
    
    th,
    td {
      text-align: left;
      padding: 16px;
    }
    
    tr:nth-child(even) {
      background-color: #f2f2f2
    }
  </style>
</head>

<body>

  <h1>Сортировка списка талицы по числам</h1>
  <a href="javascript:;" class="getTime">Добавить закладку</a>
  <p>Нажмите на кнопку, чтобы отсортировать таблицу численно:</p>
  <p><button onclick="sortTable()">Сортировать</button></p>

  <table class="bookmarkTable" id="myTable">
    <tr>
      <th>ID</th>
      <th>Имя</th>
    </tr>
    <tr>
      <td>5</td>
      <td>Berglunds snabbkop</td>
    </tr>
    <tr>
      <td>3</td>
      <td>North/South</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Alfreds Futterkiste</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Koniglich Essen</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Magazzini Alimentari Riuniti</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Paris specialites</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Island Trading</td>
    </tr>

  </table>

  <script>
    $('.getTime').on('click', function() {


      mycurrentTime = 0
      formatted = 1
      Nmetka = 2
      //Заполнение таблицы
      $(".bookmarkTable").append("<tr><td>" + Math.round(mycurrentTime) + "</td><td>" + formatted + " -" + Nmetka + "</td><tr>");


    });



    function sortTable() {
      var table, rows, switching, i, x, y, shouldSwitch;
      table = document.getElementById("myTable");
      switching = true;
      /*Сделайте петлю, которая будет продолжаться до тех пор, пока
      никакого переключения не было сделано:*/
      while (switching) {
        //начните с того, что скажите: никакого переключения не происходит:
        switching = false;
        rows = table.rows;
        /*Цикл через все строки таблицы (за исключением
        во-первых, который содержит заголовки таблиц):*/
        for (i = 1; i < (rows.length - 1); i++) {
          //начните с того, что не должно быть никакого переключения:
          shouldSwitch = false;
          /*Получите два элемента, которые вы хотите сравнить,
          один из текущей строки и один из следующей:*/
          x = rows[i].getElementsByTagName("TD")[0];
          y = rows[i + 1].getElementsByTagName("TD")[0];
          //проверьте, должны ли две строки поменяться местами:
          if (Number(x.innerHTML) > Number(y.innerHTML)) {
            //если это так, отметьте как переключатель и разорвите петлю:
            shouldSwitch = true;
            break;
          }
        }
        if (shouldSwitch) {
          /*Если переключатель был отмечен, сделайте переключатель
          и отметьте, что переключение было сделано:*/
          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
          switching = true;
        }
      }
    }
  </script>

</body>

</html>

1 ответ 1

0

Товарищ! Закончил - закрой тег.

$(".bookmarkTable").append("<tr><td>" + Math.round(mycurrentTime) + "</td><td>" + formatted + " -" + Nmetka + 
  "</td></tr>");
         ^ <-- !!!
2
  • Спасибо!!! Как все просто оказывается!! Аж стыдно стало) Такую ошибку просмотрел)) А я на скрипт грешил ..
    – Роман
    5 окт 2021 в 19:59
  • @Роман Пожалуйста. Успехов.
    – user176262
    5 окт 2021 в 20:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.