jQuery Сортировка столбцов таблицы по содержимому в 'sub-div' внутри 'td' - PullRequest
Новая
       29

jQuery Сортировка столбцов таблицы по содержимому в 'sub-div' внутри 'td'

0 голосов
/ 05 ноября 2019

У меня есть таблица, в которой первая строка имеет содержимое в двух «div» внутри каждого «td». Оставшиеся две строки содержат содержимое в самом «td».

Таблица должна быть отсортирована (в порядке возрастания) по столбцам в соответствии с параметром, выбранным в раскрывающемся списке «Сортировка». (Содержимое в 'divs' и соответствующий раскрывающийся текст имеют цветовую кодировку для понимания, как на рисунке ниже).

enter image description here

JQuery I 'm используется для сортировки 2-й и 3-й строк с содержимым самого td следующим образом, что работает нормально: 

var RowtoSort = $(".CompTable tr." + $(this).find("option:selected").text());
                RowtoSort.find('td:not(:first)').sort(function(a, b) {
                    a = $(a).text();
                    b = $(b).text();
                    return (a === 'NA')-(b === 'NA') || -(a>b)||+(a<b);
                }).each(function(new_Index) {
                    var original_Index = $(this).index();

                    Rows.each(function() {
                    var td = $(this).find('td, th');
                    if (original_Index !== new_Index)
                    td.eq(original_Index).insertAfter(td.eq(new_Index));
                    });
                });

Однако, когда я использую это для первой строки, чтобы нацелиться на 'divs'внутри каждого 'td' он сортирует его неправильно: 

var RowtoSort = $(".CompTable tr.Statistics");
**var DivtoSort = $(".CompTable tr.Statistics td:not(:first) div." + $(this).find("option:selected").text());**

            DivtoSort.sort(function(a, b) {
            a = $(a).text();
            b = $(b).text();            
            return (a === 'NA')-(b === 'NA') || -(a>b)||+(a<b);
            }).each(function(new_Index) {
                var original_Index = $(this).index();

                Rows.each(function() {
                var td = $(this).find('td, th');
                if (original_Index !== new_Index)
                td.eq(original_Index).insertAfter(td.eq(new_Index));
                });
            });
            }

Ниже приведен весь рабочий код для справки: 

jQuery(document).ready(function($) {

  $("#SortBy").on('change', function() {

    var Rows = $('.CompTable tr');
    if ($(this).find("option:selected").attr("name") == "Statistics") {

      var RowtoSort = $(".CompTable tr.Statistics");
      var DivtoSort = $(".CompTable tr.Statistics td:not(:first) div." + $(this).find("option:selected").text());

      DivtoSort.sort(function(a, b) {
        a = $(a).text();
        b = $(b).text();
        return (a === 'NA') - (b === 'NA') || -(a > b) || +(a < b);
      }).each(function(new_Index) {
        var original_Index = $(this).index();

        Rows.each(function() {
          var td = $(this).find('td, th');
          if (original_Index !== new_Index)
            td.eq(original_Index).insertAfter(td.eq(new_Index));
        });
      });
    } else {
      var RowtoSort = $(".CompTable tr." + $(this).find("option:selected").text());
      RowtoSort.find('td:not(:first)').sort(function(a, b) {
        a = $(a).text();
        b = $(b).text();
        return (a === 'NA') - (b === 'NA') || -(a > b) || +(a < b);
      }).each(function(new_Index) {
        var original_Index = $(this).index();

        Rows.each(function() {
          var td = $(this).find('td, th');
          if (original_Index !== new_Index)
            td.eq(original_Index).insertAfter(td.eq(new_Index));
        });
      });
    }
  });
});
.CompTable {
  table-layout: fixed;
  width: 50%;
  position: relative;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  margin: 10px;
  border: 1px solid #222;
  text-align: center;
}

.CompTable td,
table th {
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="SortByDiv">
  Sort by:
  <select id="SortBy">
    <option></option>
    <option name=Statistics style="color: blue">Statistics1</option>
    <option name=Statistics style="color: red">Statistics2</option>
    <option name=Parameter1>Parameter1</option>
    <option name=Parameter2>Parameter2</option>
  </select>
  </br>
  </br>
  </br>
  </br>
  </br>
  <div class="divResult">
    <table class="CompTable">
      <thead>
        <th>&nbsp;</th>
        <th>Samsung</th>
        <th>Apple</th>
        <th>Motorola</th>
      </thead>
      <tbody>
        <tr class="Statistics">
          <td>Statistics</td>
          <td>
            <div style="display:flex; flex-direction: column; width: 100%;">
              <div class="Statistics1" style="display:flex; color:blue; width: 100%;">3200</div>
              <div class="Statistics2" style="display:flex; color:red; width: 100%;">0</div>
            </div>
          </td>
          <td>
            <div style="display:flex; flex-direction: column; width: 100%;">
              <div class="Statistics1" style="display:flex; color:blue; width: 100%;">1500</div>
              <div class="Statistics2" style="display:flex; color:red; width: 100%;">NA</div>
            </div>
          </td>
          <td>
            <div style="display:flex; flex-direction: column; width: 100%;">
              <div class="Statistics1" style="display:flex; color:blue; width: 100%;">4100</div>
              <div class="Statistics2" style="display:flex; color:red; width: 100%;">1500</div>
            </div>
          </td>
        </tr>
        <tr class="Parameter1">
          <td>Parameter1</td>
          <td>0</td>
          <td>NA</td>
          <td>7000</td>
        </tr>
        <tr class="Parameter2">
          <td>Parameter2</td>
          <td>5000</td>
          <td>NA</td>
          <td>7000</td>
        </tr>
      </tbody>
    </table>
  </div>

1 Ответ

1 голос
/ 05 ноября 2019

Использование find() для фильтрации внутренней таблицы div

  a = $(a).find(datasub)
  b = $(b).find(datasub)

на основе data-sub

<option name=Statistics data-sub="Statistics1" style="color: blue">Statistics1</option>
<option name=Statistics data-sub="Statistics2" style="color: red">Statistics2</option>


$("#SortBy").on('change', function() {
  var datasub = $(this).find("option:selected").data('sub')
  datasub = datasub ? '.' + datasub : undefined;

  var Rows = $('.CompTable tr');
  var RowtoSort = $(".CompTable tr." + $(this).find("option:selected").attr('name'));
  RowtoSort.find('td:not(:first)').sort(function(a, b) {
    if (datasub) {
      a = $(a).find(datasub)
      b = $(b).find(datasub)
    }
    a = $(a).text();
    b = $(b).text();
    return (a === 'NA') - (b === 'NA') || -(a > b) || +(a < b);
  }).each(function(new_Index) {
    var original_Index = $(this).index();

    Rows.each(function() {
      var td = $(this).find('td, th');
      if (original_Index !== new_Index)
        td.eq(original_Index).insertAfter(td.eq(new_Index));
    });
  });
});
.CompTable {
  table-layout: fixed;
  width: 50%;
  position: relative;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  margin: 10px;
  border: 1px solid #222;
  text-align: center;
}

.CompTable td,
table th {
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="SortByDiv">
  Sort by:
  <select id="SortBy">
    <option></option>
    <option name=Statistics data-sub="Statistics1" style="color: blue">Statistics1</option>
    <option name=Statistics data-sub="Statistics2" style="color: red">Statistics2</option>
    <option name=Parameter1>Parameter1</option>
    <option name=Parameter2>Parameter2</option>
  </select>
  </br>
  </br>
  </br>
  </br>
  </br>
  <div class="divResult">
    <table class="CompTable">
      <thead>
        <th>&nbsp;</th>
        <th>Samsung</th>
        <th>Apple</th>
        <th>Motorola</th>
      </thead>
      <tbody>
        <tr class="Statistics">
          <td>Statistics</td>
          <td>
            <div style="display:flex; flex-direction: column; width: 100%;">
              <div class="Statistics1" style="display:flex; color:blue; width: 100%;">3200</div>
              <div class="Statistics2" style="display:flex; color:red; width: 100%;">0</div>
            </div>
          </td>
          <td>
            <div style="display:flex; flex-direction: column; width: 100%;">
              <div class="Statistics1" style="display:flex; color:blue; width: 100%;">1500</div>
              <div class="Statistics2" style="display:flex; color:red; width: 100%;">NA</div>
            </div>
          </td>
          <td>
            <div style="display:flex; flex-direction: column; width: 100%;">
              <div class="Statistics1" style="display:flex; color:blue; width: 100%;">4100</div>
              <div class="Statistics2" style="display:flex; color:red; width: 100%;">1500</div>
            </div>
          </td>
        </tr>
        <tr class="Parameter1">
          <td>Parameter1</td>
          <td>0</td>
          <td>NA</td>
          <td>7000</td>
        </tr>
        <tr class="Parameter2">
          <td>Parameter2</td>
          <td>5000</td>
          <td>NA</td>
          <td>7000</td>
        </tr>
      </tbody>
    </table>
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...