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

#javascript #html-table

#javascript #html-таблица

Вопрос:

Я пытаюсь отсортировать таблицу с помощью 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>

Развернуть фрагмент

Есть ли какой-нибудь способ? Пожалуйста, помогите

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

2. @sergeykuznetsov да, столбец в конце.

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

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

Ответ №1:

можете ли вы собрать ячейки в объект и отсортировать их следующим образом. 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];
    });
  });
}

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

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

Ответ №2:

вставьте строки 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]); 
   }