javascript - 我怎样才能在jquery中实现表级层次结构？

Question

我需要将与父级相同的名称与子级分组，就像某些树级层次结构级别一样。

Fiddle Link

尝试过的代码

var classes = {};
$('.scroll td').each(function() {
    classes[$(this).attr('class')] = $(this).attr('class');
  //console.log($(this).attr('class'));
});

$.each(classes,function(entry) {
   $("."+entry).wrapAll("<li>"+entry.toUpperCase()+"<ul></ul></li>");
});

预期输出

像这样的 parent 和 child 吗？

Answer 1

这是解决方案 - https://jsfiddle.net/Pugazh/jm3b4eyk/3/

$(document).ready(function() {

  var tds = [];
  $('.scroll tbody tr').each(function() {
    var user = $(this).find('td:eq(0)').text();
    var tenant = $(this).find('td:eq(1)').text();
    if (tenant in tds) {
      var arr = tds[tenant];
      arr.push(user);
      tds[tenant] = arr;
    } else
      tds[tenant] = [user];
  });

  var html = "<ul>"

  for (var key in tds) {
    html = html + "<li>" + key + '<ul><li>' + tds[key].join('</li><li>') + " </li></ul> ";
  }
  html = html + "</ul>"
  $(".list").html(html);

});

/*** Table Styles **/

table.scroll {
  border-spacing: 0;
  max-width: 425px;
}
table.scroll tbody,
table.scroll thead {
  display: block;
}
table.scroll thead tr th {
  height: 30px;
  line-height: 30px;
  /* text-align: left; */
}
table.scroll tbody {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 400px;
  height: 370px;
}
table.scroll td {
  background: #EBEBEB;
  border-top: 1px solid #ccc;
  padding: 6px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
table.scroll tr:nth-child(odd) td {
  background: #FFF;
}
.tdheader {
  background: #2980b9 !important;
  color: #fff;
  font-weight: bold;
}
.divclassleft {
  float: left;
  margin: 25px;
  margin-left: 0px;
}
.divclassright {
  float: right;
  margin: 25px;
}
.w27 {
  width: 155px;
}
.w168 {
  width: 255px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list"></div>

<table class="scroll">
  <thead>
    <tr>
      <td class="tdheader" style="width: 148px;">User Name</td>
      <td class="tdheader" style="width: 250px;">Tenant Name</td>
    </tr>
  </thead>
  <tbody class="table-hover dashboard_cusomer_list">
    <tr>
      <td class="text-left w27">Mulla Mahaboob Basha</td>
      <td class="text-left w168">stream Internal</td>
    </tr>
    <tr>
      <td class="text-left w27">Kyle Woodcock</td>
      <td class="text-left w168">stream Internal Test &amp; Development</td>
    </tr>
    <tr>
      <td class="text-left w27">Kevin Tamarit</td>
      <td class="text-left w168">stream Internal Test &amp; Development</td>
    </tr>
    <tr>
      <td class="text-left w27">Samrat Bhattacharjee</td>
      <td class="text-left w168">stream Internal</td>
    </tr>
    <tr>
      <td class="text-left w27">Radha Krishna</td>
      <td class="text-left w168">stream Internal Test &amp; Development</td>
    </tr>
    <tr>
      <td class="text-left w27">Girish Budugur</td>
      <td class="text-left w168">stream Internal</td>
    </tr>
    <tr>
      <td class="text-left w27">Mike MacKenzie</td>
      <td class="text-left w168">Colt Technology Services</td>
    </tr>
    <tr>
      <td class="text-left w27">Vikas Arora</td>
      <td class="text-left w168">stream Internal Test &amp; Development</td>
    </tr>
    <tr>
      <td class="text-left w27">Cassie Alonzo</td>
      <td class="text-left w168">stream Internal</td>
    </tr>
    <tr>
      <td class="text-left w27">Sivanageswararao Kotha</td>
      <td class="text-left w168">stream Internal</td>
    </tr>
    <tr>
      <td class="text-left w27">Kayeta Mauryateja</td>
      <td class="text-left w168">stream Internal</td>
    </tr>
    <tr>
      <td class="text-left w27">Soumitra De</td>
      <td class="text-left w168">stream Internal Test &amp; Development</td>
    </tr>
    <tr>
      <td class="text-left w27">Shankar Javaregowda</td>
      <td class="text-left w168">stream Internal</td>
    </tr>
    <tr>
      <td class="text-left w27">Chandreyee Chatterjee</td>
      <td class="text-left w168">stream Internal</td>
    </tr>
    <tr>
      <td class="text-left w27">Imrankhan Hameetkhan</td>
      <td class="text-left w168">stream Internal</td>
    </tr>
    <tr>
      <td class="text-left w27">Venkatarao Mandalapu</td>
      <td class="text-left w168">stream Internal Test &amp; Development</td>
    </tr>
    <tr>
      <td class="text-left w27">Hemanth Banala</td>
      <td class="text-left w168">stream Internal</td>
    </tr>
    <tr>
      <td class="text-left w27">Vikram Gautam</td>
      <td class="text-left w168">stream Internal Test &amp; Development</td>
    </tr>
    <tr>
      <td class="text-left w27">Balakrishna Reddy</td>
      <td class="text-left w168">stream Internal Test &amp; Development</td>
    </tr>
    <tr>
      <td class="text-left w27">Satheeshkumar Umachandran</td>
      <td class="text-left w168">stream Internal Test &amp; Development</td>
    </tr>
    <tr>
      <td class="text-left w27">Premchand Jyotula</td>
      <td class="text-left w168">stream Internal Test &amp; Development</td>
    </tr>
    <tr>
      <td class="text-left w27">Gopi Reddy Gayam</td>
      <td class="text-left w168">stream Internal</td>
    </tr>
    <tr>
      <td class="text-left w27">Mahesh Surendran</td>
      <td class="text-left w168">stream Internal</td>
    </tr>
    <tr>
      <td class="text-left w27">Charan Sajja</td>
      <td class="text-left w168">stream Internal Test &amp; Development</td>
    </tr>
    <tr>
      <td class="text-left w27">Arpana Chaudhary</td>
      <td class="text-left w168">stream Internal</td>
    </tr>
    <tr>
      <td class="text-left w27">Grant Chambers</td>
      <td class="text-left w168">stream Internal</td>
    </tr>
  </tbody>
</table>