我怎麼能在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>"); 
}); 

期望輸出

像這樣父母和孩子？

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>