Question

我有一个表结构。我想将所有在第一个孩子TD中具有相同内容的TR放在一起，并在组之前添加TR。所以，我试图用相同的内容对TR进行分组。

我的结构是

    <tbody>
         <tr>
              <td class="groupBy">www.bing.com</td>
              <td>2</td>
         </tr>
         <tr>
              <td class="groupBy">www.google.com</td>
              <td>5</td>
         </tr>
          <tr>
              <td class="groupBy">www.bing.com</td>
              <td>2</td>
         </tr>
          <tr>
              <td class="groupBy">www.yahoo.com</td>
              <td>8</td>
         </tr>
          <tr>
              <td class="groupBy">www.google.com</td>
              <td>8</td>
         </tr>
         <tr>
              <td class="groupBy">www.bing.com</td>
              <td>2</td>
         </tr>
    </tbody>

我希望在jquery之后输出

    <tbody> 
            <tr>
                <p>www.bing.com</p>
            </tr>
             <tr>
                  <td class="groupBy">www.bing.com</td>
                  <td>2</td>
             </tr>
             <tr>
                  <td class="groupBy">www.bing.com</td>
                  <td>2</td>
             </tr>
             <tr>
                  <td class="groupBy">www.bing.com</td>
                  <td>2</td>
             </tr>
             <tr>
                <p>www.google.com</p>
            </tr>
             <tr>
                  <td class="groupBy">www.google.com</td>
                  <td>5</td>
             </tr>
              <tr>
                  <td class="groupBy">www.google.com</td>
                  <td>5</td>
             </tr>
             <tr>
                <p>www.yahoo.com</p>
            </tr>
              <tr>
                  <td class="groupBy">www.yahoo.com</td>
                  <td>8</td>
             </tr>
</tbody>

有人可以帮我解决这个问题吗？

Answer 1

您所描述的是对元素进行排序而不对它们进行分组，这是一个肮脏的解决方案：

var arr = [], s = [];

$('tr').sort(function(a, b){
   return $(a).text() > $(b).text(); 
}).each(function(i, v){
    var t = $('td:first', v).text();
    if ( arr.indexOf(t) === -1) {
       arr.push(t);
       s.push(v);
    }
}).appendTo('tbody').filter(s).before(function(){
    return '<tr class="header"><td><p>' +  $('td:first', this).text() +  '</p></td></tr>';
});

http://jsfiddle.net/SD8at/

如何将TR归为同一类？

1 个答案: