Question

实际上，我有这个表，需要根据最高值排序'行'[我的意思是，连续，所有列的总和。]。最后一行是总数，也应该自动求和。如果我按下“前5名”，则只需要显示前5行[基于cols的总和]。如果我按下“全部”，则表必须进入原始状态。

任何帮助？

<div id="na_1" style="border: 1px solid gray;width: 450px;padding:10px;">

<form>
<input type="radio" name="all" value="All" onclick="Turnthis();"/>All
<input type="radio" name="top5" value="Top15" onclick="TurnOutthis();"/>Top5
</form>

<table id="bt_01" border="1" width="100%">
<thead>
<tr><td>head1</td><td>head2</td><td>head3</td><td>head4</td><td>head5</td><td>head6</td><td>head7</td></tr>
</thead>
<tbody>
<tr><td>Subject1</td><td>501</td><td>501</td><td>501</td><td>550</td><td>560</td><td>570</td></tr>
<tr><td>Subject2</td><td>620</td><td>640</td><td>605</td><td>650</td><td>600</td><td>604</td></tr>
<tr><td>Subject3</td><td>730</td><td>730</td><td>740</td><td>750</td><td>760</td><td>790</td></tr>
<tr><td>Subject4</td><td>700</td><td>701</td><td>700</td><td>702</td><td>700</td><td>703</td></tr>
<tr><td>Subject5</td><td>220</td><td>201</td><td>202</td><td>222</td><td>210</td><td>203</td></tr>
<tr><td>Subject6</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
<tr><td>Subject7</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
<tr><td>Subject8</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
<tr><td>Total</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>  
</table>

</div>

Answer 1

我认为你可以做点什么

＆＃13;

jQuery(function($) {
  var $table = $('#bt_01'),
    $trs = $table.find('tbody tr'),
    $tftds = $table.find('tfoot td').slice(1);

  var cols = {};
  //calculate the value for each row and column & cache it for future use
  $trs.each(function() {
    var sum = 0;
    $(this).find('td').slice(1).each(function(i) {
      var value = +$(this).text() || 0;
      sum += value;
      cols[i] = (cols[i] || 0) + value;
    });
    $(this).data('total', sum);
  });

  //set the overall total
  $tftds.text(function(i) {
    //cache the overall total
    $(this).data('total', cols[i])
    return cols[i];
  });

  //sort the values based on row total
  $trs.sort(function(a, b) {
    return $(b).data('total') - $(a).data('total');
  }).appendTo($table.find('tbody'));

  $('input[name="type"][value="all"]').change(function() {
    $trs.slice(5).show();
    $tftds.text(function(i) {
      return $(this).data('total')
    });
  });

  $('input[name="type"][value="top5"]').change(function() {
    $trs.slice(5).hide();
    $tftds.text(function(i) {
      var total = $(this).data('total5');
      //if the total of first 5 are cached then use it else calculate and cache the value for future use
      if (!total) {
        total = 0;
        $trs.slice(0, 5).find('td:nth-child(' + (i + 2) + ')').each(function() {
          total += +$(this).text() || 0;
        });
        $(this).data('total5', total);
      }
      return total;
    });
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="na_1" style="border: 1px solid gray;width: 450px;padding:10px;">

  <form>
    <input type="radio" name="type" value="all"/>All
    <input type="radio" name="type" value="top5"/>Top5
  </form>

  <table id="bt_01" border="1" width="100%">
    <thead>
      <tr><td>head1</td><td>head2</td><td>head3</td><td>head4</td><td>head5</td><td>head6</td><td>head7</td></tr>
    </thead>
    <tbody>
      <tr><td>Subject1</td><td>501</td><td>501</td><td>501</td><td>550</td><td>560</td><td>570</td></tr>
      <tr><td>Subject2</td><td>620</td><td>640</td><td>605</td><td>650</td><td>600</td><td>604</td></tr>
      <tr><td>Subject3</td><td>730</td><td>730</td><td>740</td><td>750</td><td>760</td><td>790</td></tr>
      <tr><td>Subject4</td><td>700</td><td>701</td><td>700</td><td>702</td><td>700</td><td>703</td></tr>
      <tr><td>Subject5</td><td>220</td><td>201</td><td>202</td><td>222</td><td>210</td><td>203</td></tr>
      <tr><td>Subject6</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
      <tr><td>Subject7</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
      <tr><td>Subject8</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
    </tbody>
    <tfoot>
      <tr><td>Total</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </tfoot>
  </table>

</div>

＆＃13;

注意：标记略有改动，使用tfoot放置total行

表行排序基于jquery中每列的总和

1 个答案: