Question

我应该如何解决以下问题＆gt;我有关于表中的每个实体多个相关行的数据（我知道使用表是绝对的，我应该使用div，但我对表很好。如果div是必要的，我会改变。）我使用jQuery基于它们的id每隔x秒将新数据放入单元格中。 我需要一个javascript函数或允许我重新排序尊重多个cohorent行的表格。我对任何其他方法持开放态度。

（PHP部分仅为了解而添加。）

<table>
    <?php
    foreach($members as $member)
       {
          //data for this member starts here

         echo"<tr>
                <td>John</td>
                <td>score:1000</td>
                <td>MAX score:2000</td>
             </tr>
             <tr>
                <td>somevalue:3000</td>
                <td>another value:4000</td>
                <td>another value:4000</td>
             </tr>
             <tr>
                  <td collspan=‘3'>This is a row for separate the members</td>
             </tr>
             ";
       //data for this member ends here
       }
?>
</table>

例如，我想根据分数进行排序。排序应该包含“somevalue”行和分隔符行以及新的“position”。

Answer 1

我将在这里出去，给你一个选择。将数据放入一组div和span中的单行中，以模拟表行和单元格的标记。请注意，您必须设置这些样式以更好地模拟它。（也许是bootstrap row等，但我会把它留给你），关键在这里就是那种。

这里为了简化逻辑，我将数值放在每一行的数据属性中，然后按行排序。

注意：单个tbody的假设，包括单一排序值，数字数据值等。

如果你想要，你可以放多个＆＃39; t＆＃39;使用数据属性并对其进行排序 - 我会将此练习留给您，但flow我的大数据集会变慢。

注意：每当渲染或添加时调用排序。您也可以避免后续排序，只需在之前的行之后插入行。

要插入的示例（可能更好但足以开始）

  var $newRow = $('<tr data-sortdata="5"><td>putalldivs in here<td></tr>');
  var rowToInsertBefore = $('#mytable').find('tr').filter(function() {
    return $(this).data('sortdata') >= $newRow.data('sortdata');
  }).get(0);

  if (typeof rowToInsertBefore === 'undefined') {
    $('#mytable').find('tbody').append($newRow);
  } else {
    $newRow.insertBefore(rowToInsertBefore);
  }

要排序的大部分代码：

＆＃13;

function sortTable(table, order, item) {
  var asc = order === 'asc',
    tbody = table.find('tbody'),
    sd = item ? item : "sortdata";
  tbody.find('tr').sort(function(a, b) {
    var sA = 1 * $(a).data(sd);
    var sB = 1 * $(b).data(sd);
    if (asc) {
      return (sA < sB) ? -1 : (1 * sA > sB) ? 1 : 0;
    } else {
      return (sB < sA) ? -1 : (sB > sA) ? 1 : 0;
    }
  }).appendTo(tbody);
}
sortTable($('#mytable'), 'asc', 'sortdata');

＆＃13;

table {
  border-collapse: collapse;
}

tr {
  border: solid 1px lime;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
    <tr data-sortdata="3000">
      <td>
        <div>
          <span>John</span>
          <span>score:1000</span>
          <span>MAX score:2000</span>
        </div>
        <div>
          <span>somevalue:3000</span>
          <span>another value:4000</span>
          <span>another value:4000</span>
        </div>
        <div>
          <span>This is a row for separate the members</span>
        </div>
      </td>
    </tr>
    <tr data-sortdata="5000">
      <td>
        <div>
          <span>Brenda</span>
          <span>score:3000</span>
          <span>MAX score:2000</span>
        </div>
        <div>
          <span>somevalue:5000</span>
          <span>another value:4000</span>
          <span>another value:4000</span>
        </div>
        <div>
          <span>This is a row for separate the members</span>
        </div>
      </td>
    </tr>
    <tr data-sortdata="1000">
      <td>
        <div>
          <span>Harry</span>
          <span>score:1000</span>
          <span>MAX score:500</span>
        </div>
        <div>
          <span>somevalue:1000</span>
          <span>another value:4000</span>
          <span>another value:4000</span>
        </div>
        <div>
          <span>This is a row for separate the members</span>
        </div>
      </td>
    </tr>
    <tr data-sortdata="1000">
      <td>
        <div>
          <span>Brenda1</span>
          <span>score:3000</span>
          <span>MAX score:2000</span>
        </div>
        <div>
          <span>somevalue:1000</span>
          <span>another value:4000</span>
          <span>another value:4000</span>
        </div>
        <div>
          <span>This is a row for separate the members</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

最后我想出来了，但我想我会重新制作Mark Schultheiss的解决方案并使用那个解决方案。更优雅..

编辑：添加了一些推文：

1，如果网页中有更多表格，则必须添加类标识符..

2，如果您还有单元格中的非数字内容，如文本等，但您想要根据数值进行排序part =＆gt;把div类放在数字周围的单元格中。

<html>
<head>
<script src="/js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#sort").click(function () {
var $tBodies = $('.klantabla tbody').sort(function(b, a){
         var aVal = +($(a).find('tr:nth-child(1) td:nth-child(3) div.num').text().trim() || 0);
         var bVal = +($(b).find('tr:nth-child(1) td:nth-child(3) div.num').text().trim() || 0);
         return aVal - bVal;
    });
    $(‘.klantabla').append($tBodies);
});
});
</script>
</head>
<body>
<input type="button" value="sort by 3rd row, 3rd column " id="sort" />
<table border=‘1' class=‘klantabla'>
<thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody class="member-1">
        <tr>
            <td>3 member1</td>
            <td>1</td>
            <td><div class=’num’>SOME SCORE 9</div></td>
        </tr>
        <tr>
            <td>2 member1</td>
            <td>2</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1 member1</td>
            <td>5</td>
            <td>5</td>
        </tr>

        <tr>
            <td colspan="3">SAPARTOR for member1</td>
        </tr>
    </tbody>
    <tbody class="member-3">
        <tr>
            <td>3 member3</td>
            <td>3</td>
            <td>11111111115</td>
        </tr>
        <tr>
            <td>2 member3</td>
            <td>5</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1 member3</td>
            <td>2</td>
            <td>9</td>
        </tr>
        <tr>
            <td colspan="3">SEPARATOR for member3</td>
        </tr>
    </tbody>
    <tbody class="member-2">
        <tr>
            <td>3 member2</td>
            <td>2</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2 member2</td>
            <td>7</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1 member2</td>
            <td>2</td>
            <td>999</td>
        </tr>
        <tr>
            <td colspan="3">SEPARATOR for member2</td>
        </tr>
    </tbody>
</table>
</body>
</html>

排序表，每个实体有多个相关的行

2 个答案: