Как отсортировать таблицу по точкам в конце столбца с помощью javascript

Я пытаюсь отсортировать таблицу с помощью javascript, чтобы упорядочить по общему количеству баллов в конце. Таблица является динамической, поэтому столбцы W1, W2, W3 суммируются. Есть ли способ упорядочить строки по сумме в javascript. Каждая строка также создается динамически.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class = "fl-table">
  <thead>
    <tr>
      <th>Player</th>
      <th>Player Name</th>
      <!-- <th>W1</th>
            <th>W2</th> -->
      <th>W1</th>
      <th>W2</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class = "agl-profile-img-new"><img src = "https://via.placeholder.com/70

C/O https://placeholder.com/"></td>
      <td>Heather Rankin</td>
      <td>4</td>
      <td>21</td>
      <td>25</td>
    </tr>
    <tr>
      <td class = "agl-profile-img-new"><img src = "https://via.placeholder.com/70

C/O https://placeholder.com/"></td>
      <td>Stephen Puopolo</td>
      <td>3</td>
      <td>1</td>
      <td>4</td>
    </tr>
    <tr>
      <td class = "agl-profile-img-new"><img src = "https://via.placeholder.com/70

C/O https://placeholder.com/"></td>
      <td>Latheesh V M V</td>
      <td>2</td>
      <td>26</td>
      <td>28</td>
    </tr>
  </tbody>
  <tbody>
  </tbody>
</table>

Есть ли способ? Пожалуйста помоги

Вы хотите отсортировать по полю «Всего»?

s.kuznetsov 21.12.2020 07:10

@sergeykuznetsov да колонка в конце.

GeekyOwl 21.12.2020 07:12

Это проще сделать, когда вы создаете свои строки, чем впоследствии манипулировать DOM. Как вы создаете свои ряды? Поделитесь кодом пожалуйста

IvanD 21.12.2020 07:30

@IvanD Это сложно, позвольте мне переработать мой PHP-код.

GeekyOwl 21.12.2020 07:41
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
Раскрытие чувствительных данных
Раскрытие чувствительных данных
Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Руководство ChatGPT по продаже мини JS-файлов
Руководство ChatGPT по продаже мини JS-файлов
JS-файл - это файл, содержащий код JavaScript. JavaScript - это язык программирования, который в основном используется для добавления интерактивности...
0
4
169
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете собрать ячейки в объект и отсортировать их следующим образом. https://jsfiddle.net/e4oscnz8/4/

const sortTotal = () => {
  const tbl = [...document.getElementsByClassName("fl-table")][0];
  const tbody = [...tbl.tBodies][0];
  const oObjects = [];

  [...tbody.rows].forEach(row => {
    const cells = [...row.cells];
    const obj = [...row.cells].map(cell => {
        return cell.innerHTML;
    });
    oObjects.push(obj);
  });

  oObjects.sort((a, b) => a[a.length -2] > b[b.length -2] ? 1 : -1);

  [...tbody.rows].forEach((row, i) => {
    [...row.cells].forEach((cell, j) => {
        cell.innerHTML = oObjects[i][j];
    });
  });
}

Спасибо, но мои строки создаются динамически, поэтому может быть больше столбцов для W1, W2, W3 и т. д.

GeekyOwl 21.12.2020 07:40

Обновил мой ответ. извини. jsfiddle.net/e4oscnz8/6. мы сохраняем строки и ячейки в двумерный массив и сортируем по последнему столбцу. а затем соответствующим образом обновить ячейки таблицы

D. Seah 21.12.2020 07:48

Поместите строки tr в массив или объект и отсортируйте с помощью вашей пользовательской функции сортировки: https://jsfiddle.net/2dq7m8k9/

Вы используете jquery, так что жизнь хороша :)

   function SortByTotal(tr1, tr2){//descending sorting
       var total1 = parseInt(tr1.find('td:last-child').text());
       var total2 = parseInt(tr2.find('td:last-child').text());
       return ((total1 > total2) ? -1 : ((total1 < total2) ? 1 : 0));
   }

   var trs=new Array();
   $('#mytable tbody').first().children('tr').each(function(){
    trs.push($(this).clone());     
   });
   trs.sort(SortByTotal);
   $('#mytable tbody').first().empty();  
   var i=0;
   for (i = 0; i < trs.length; i++) {
      $('#mytable tbody').first().append(trs[i]); 
   }

Другие вопросы по теме