Question

我有一个表，我希望在单击列标题时按列排序，但是表中还有隐藏的行，这些行分配给每一行。问题是如果我按列对表进行排序，它也会对这些隐藏的行进行排序，它们将失去与行的关联。例如。 <tr class="grey">行始终可见，每个行都有隐藏的行，例如<tr class="sales-details-title hide">和<tr class="sales-details hide">

  <table width="100%" class="modal-table" id="modal-table">
        <thead>
            <tr>
                <th id="sn">Surgeon name</th>
                <th id="ct">Country</th>
                <th>Antiquity</th>
                <th>Amount</th>
            </tr>
        </thead>
        <tbody>
            <tr class="grey">
                <td>dfvdf dscdsc</td>
                <td>United States</td>
                <td>new client</td>
                <td>10000.0 USD</td>
            </tr>
            <tr class="sales-details-title hide">
                <td></td>
                <td></td>
                <td><strong>Seller</strong>
                </td>
                <td><strong>Percentage</strong>
                </td>
            </tr>
            <tr class="sales-details hide">
                <td></td>
                <td></td>
                <td>Support</td>
                <td>10000.0 USD</td>
            </tr>
            <tr class="grey">
                <td>Alexander Larrazabal</td>
                <td>Spain</td>
                <td>renewal</td>
                <td>9423.0 EUR</td>
            </tr>
            <tr class="sales-details-title hide">
                <td></td>
                <td></td>
                <td><strong>Seller</strong>
                </td>
                <td><strong>Percentage</strong>
                </td>
            </tr>
            <tr class="sales-details hide">
                <td></td>
                <td></td>
                <td>larra support</td>
                <td>9423.0 EUR</td>
            </tr>
            <tr class="grey">
                <td>fadadfs sdfdsf</td>
                <td>United States</td>
                <td>new client</td>
                <td>901.55 USD</td>
            </tr>
            <tr class="sales-details-title hide">
                <td></td>
                <td></td>
                <td><strong>Seller</strong>
                </td>
                <td><strong>Percentage</strong>
                </td>
            </tr>
            <tr class="sales-details hide">
                <td></td>
                <td></td>
                <td>Fabri</td>
                <td>901.55 USD</td>
            </tr>
            <tr class="grey">
                <td>such surgeon</td>
                <td>United States</td>
                <td>new client</td>
                <td>901.55 USD</td>
            </tr>
            <tr class="sales-details-title hide">
                <td></td>
                <td></td>
                <td><strong>Seller</strong>
                </td>
                <td><strong>Percentage</strong>
                </td>
            </tr>
            <tr class="sales-details hide">
                <td></td>
                <td></td>
                <td>Fabri</td>
                <td>901.55 USD</td>
            </tr>
            <tr class="grey">
                <td>Alexander Larrazabal</td>
                <td>Spain</td>
                <td>renewal</td>
                <td>9423.0 EUR</td>
            </tr>
            <tr class="sales-details-title hide">
                <td></td>
                <td></td>
                <td><strong>Seller</strong>
                </td>
                <td><strong>Percentage</strong>
                </td>
            </tr>
            <tr class="sales-details hide">
                <td></td>
                <td></td>
                <td>larra support</td>
                <td>9423.0 EUR</td>
            </tr>
        </tbody>
    </table>

JQUERY：

function sortTable(f,n){
  var rows = $('#modal-table tbody  tr').get();

  rows.sort(function(a, b) {

    var A = getVal(a);
    var B = getVal(b);

    if(A < B) {
      return -1*f;
    }
    if(A > B) {
      return 1*f;
    }
    return 0;
  });

  function getVal(elm){
    var v = $(elm).children('td').eq(n).text().toUpperCase();
    if($.isNumeric(v)){
      v = parseInt(v,10);
    }
    return v;
  }

  $.each(rows, function(index, row) {
    $('#modal-table').children('tbody').append(row);
  });
}

var f_sn = 1;
var f_ct = 1;

$(document).on("click ", "#modal-table th", function(e) {
  e.preventDefault();

  var id = $(this).attr('id');

  if(id == 'sn')
   f_sn *= -1;
  if(id == 'ct')
   f_ct *= -1;

  var n = $(this).prevAll().length;

  if(id == 'sn')
   sortTable(f_sn,n);
  if(id == 'ct')
   sortTable(f_ct,n);

});

Answer 1

在评论中关注@bitifet建议 - 这是一个代码，它将按tbody对您的表进行排序（每个相关的行都在新的tbody标记内分组）。

排序由具有tr类的第一个grey完成我还添加了一些css，因此您可以查看（不透明度为0.5）隐藏的行。

如果您不想/无法更改html结构，我还添加了prepareTableForSorting函数，以确保表格的结构是您需要处理的结构排序

＆＃13;

function sortTable(f,n){
  var rowsGroups = $('#modal-table tbody').get();

  rowsGroups.sort(function(a, b) {

    var A = getVal($(a).find('tr.grey'));
    var B = getVal($(b).find('tr.grey'));

    if(A < B) {
      return -1*f;
    }
    if(A > B) {
      return 1*f;
    }
    return 0;
  });

  function getVal(elm){
    var v = $(elm).children('td').eq(n).text().toUpperCase();
    if($.isNumeric(v)){
      v = parseInt(v,10);
    }
    return v;
  }

  $.each(rowsGroups, function(index, grp) {
    $('#modal-table').append(grp);
  });
}

var f_sn = 1;
var f_ct = 1;

function prepareTableForSorting(tblId) {
  var chunk = $()
  $('#' + tblId).find('tr.grey').each(function() {
    var chunk = $(this)
    $(this).nextAll('tr').each(function() {
      if ($(this).hasClass('grey')) {
        return false
      }
      chunk = chunk.add(this)
    });
    if (chunk) {
      $('#modal-table').append($('<tbody>').append(chunk))
    }
  });
}

prepareTableForSorting('modal-table');

$(document).on("click ", "#modal-table th", function(e) {
  e.preventDefault();

  var id = $(this).attr('id');

  if(id == 'sn')
   f_sn *= -1;
  if(id == 'ct')
   f_ct *= -1;

  var n = $(this).prevAll().length;

  if(id == 'sn')
   sortTable(f_sn,n);
  if(id == 'ct')
   sortTable(f_ct,n);

});

＆＃13;

.grey {
  background: grey;
}
.hide {
  opacity: 0.5;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" class="modal-table" id="modal-table">
        <thead>
            <tr>
                <th id="sn">Surgeon name</th>
                <th id="ct">Country</th>
                <th>Antiquity</th>
                <th>Amount</th>
            </tr>
        </thead>
        <tbody>
            <tr class="grey">
                <td>dfvdf dscdsc</td>
                <td>United States</td>
                <td>new client</td>
                <td>10000.0 USD</td>
            </tr>
            <tr class="sales-details-title hide">
                <td></td>
                <td></td>
                <td><strong>Seller</strong>
                </td>
                <td><strong>Percentage</strong>
                </td>
            </tr>
            <tr class="sales-details hide">
                <td></td>
                <td></td>
                <td>Support</td>
                <td>10000.0 USD</td>
            </tr>
            <tr class="grey">
                <td>Alexander Larrazabal</td>
                <td>Spain</td>
                <td>renewal</td>
                <td>9423.0 EUR</td>
            </tr>
            <tr class="sales-details-title hide">
                <td></td>
                <td></td>
                <td><strong>Seller</strong>
                </td>
                <td><strong>Percentage</strong>
                </td>
            </tr>
            <tr class="sales-details hide">
                <td></td>
                <td></td>
                <td>larra support</td>
                <td>9423.0 EUR</td>
            </tr>
            <tr class="grey">
                <td>fadadfs sdfdsf</td>
                <td>United States</td>
                <td>new client</td>
                <td>901.55 USD</td>
            </tr>
            <tr class="sales-details-title hide">
                <td></td>
                <td></td>
                <td><strong>Seller</strong>
                </td>
                <td><strong>Percentage</strong>
                </td>
            </tr>
            <tr class="sales-details hide">
                <td></td>
                <td></td>
                <td>Fabri</td>
                <td>901.55 USD</td>
            </tr>
            <tr class="grey">
                <td>such surgeon</td>
                <td>United States</td>
                <td>new client</td>
                <td>901.55 USD</td>
            </tr>
            <tr class="sales-details-title hide">
                <td></td>
                <td></td>
                <td><strong>Seller</strong>
                </td>
                <td><strong>Percentage</strong>
                </td>
            </tr>
            <tr class="sales-details hide">
                <td></td>
                <td></td>
                <td>Fabri</td>
                <td>901.55 USD</td>
            </tr>
            <tr class="grey">
                <td>Alexander Larrazabal</td>
                <td>Spain</td>
                <td>renewal</td>
                <td>9423.0 EUR</td>
            </tr>
            <tr class="sales-details-title hide">
                <td></td>
                <td></td>
                <td><strong>Seller</strong>
                </td>
                <td><strong>Percentage</strong>
                </td>
            </tr>
            <tr class="sales-details hide">
                <td></td>
                <td></td>
                <td>larra support</td>
                <td>9423.0 EUR</td>
            </tr>
        </tbody>
    </table>

＆＃13;

希望它有所帮助。

按列排序，但考虑与每行关联的隐藏行

1 个答案: