使用jquery / javascript根据单元格值对表格行进行分组 [英] Grouping table rows based on cell value using jquery/javascript
本文介绍了使用jquery / javascript根据单元格值对表格行进行分组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在努力解决这个问题。我将不胜感激任何帮助你解决这个问题。我有一张如下表格：
ID姓名学习
1111 Angela XRAY
2222 Bena Ultrasound
3333 Luis CT Scan
1111 Angela超声波
3333 Luis XRAY
3333 Luis LASER
，我想将它们分组为：
ID名称学习
GROUP BY id（ 1111）2击中+
2222 Bena Ultrasound
GROUP BY id（3333）3击中+
如果单击+，则它将展开：
ID名称学习
组按ID（1111）2点击 -
1111安吉拉XRAY
1111安吉拉超声
2222笨啊超声
GROUP BY ID（3333）3次命中 -
3333 Luis CT扫描
3333 Luis Ultrasound
3333 Luis LASER
有一个演示我发现在stackoverflow（ http://jsfiddle.net/FNvsQ/1/ ），但唯一的问题我有我想要包括具有相同的ID下的所有行像一个动态头像
$ b
按id（1111）分组，然后展开/折叠图标（+/-）
var table = $（'table'）[0];
var rowGroups = {};
//循环遍历除第一行（标题行）以外的行
while（table.rows.length> 0）{
var row = table.rows [0];
var id = $（row.cells [0]）。text（）;
if（！rowGroups [id]）rowGroups [id] = [];
if（rowGroups [id] .length> 0）{
row.className ='subrow';
$（row）.slideUp（）;
}
rowGroups [id] .push（row）;
table.deleteRow（0）;
}
//遍历行组以构建新的表格内容
（rowGroups中的var id）{
var group = rowGroups [id]; （var j = 0; j
if（group.length> 1&& j == 0）{
// add + button
var lastCell = row.cells [row.cells.length - 1] ;
$（< span class ='collapsed'>）。appendTo（lastCell）.click（plusClick）;
}
table.tBodies [0] .appendChild（row）;
$ b //函数处理按钮单击
函数plusClick（e）{
var collapsed = $（this）.hasClass（'collapsed'）;
var fontSize =折叠？ 14：0;
$（this）.closest（'tr'）。nextUntil（'：not（.subrow）'）。slideToggle（400）
.css（'font-size'，fontSize）;
$（this）.toggleClass（'collapsed'）;
解决方案
这是我的答案自己的问题。
第一个id被添加到表和行中，并且对JS有一个小小的改变：
<
var table = $（'table'）[0]; var rowGroups = {}; //循环除第一行row（表头行）while（table.rows.length> 1）{var row = table.rows [1]; var id = $（row.cells [0]）。text（）; if（！rowGroups [id]）rowGroups [id] = []; if（rowGroups [id] .length> 0）{row.className ='subrow'; $（行）.slideUp（）; } rowGroups [id] .push（row）; table.deleteRow（1）;} //循环遍历行组以构建新的表格contentfor（var group in rowGroups）{var group = rowGroups [id]; for（var j = 0; j
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< table id =table1> < tr id =tr1> < th> Parent ID< / th> < th> Parent Name< / th> <的第i;学习与LT; /第> < / TR> < tr id =tr2> < TD> 1111 LT; / TD> < TD>安吉拉< / TD> < TD> XRAY< / TD> < / TR> < tr id =tr3> < TD> 2222< / TD> < TD>贝纳< / TD> < TD> Untrasound< / TD> < / TR> < tr id =tr4> < TD> 3333< / TD> < TD>路易斯< / TD> < td> CT扫描< / td> < / TR> < tr id =tr5> < TD> 1111 LT; / TD> < TD>安吉拉< / TD> < TD> Untrasound< / TD> < / TR> < tr id =tr6> < TD> 3333< / TD> < TD>路易斯< / TD> < TD> LCD< / TD> < / TR> < tr id =tr7> < TD> 3333< / TD> < TD>路易斯< / TD> < TD> LASER< / TD> < / table>
将代码复制并粘贴到 http://jsfiddle.net/FNvsQ/1/ &
在框架&扩展面板，设置onLoad为无包装体。
I have been trying to solve this for days.I would greatly appreciate any help you can give me in solving this problem. I have a table like the following:
ID Name Study
1111 Angela XRAY
2222 Bena Ultrasound
3333 Luis CT Scan
1111 Angela Ultrasound
3333 Luis XRAY
3333 Luis LASER
and I want to group them like:
ID Name Study
GROUP BY id(1111) 2 hits "+"
2222 Bena Ultrasound
GROUP BY id(3333) 3 hits "+"
AND if "+" is clicked then it will expand:
ID Name Study
GROUP BY id(1111) 2 hits "-"
1111 Angela XRAY
1111 Angela Ultrasound
2222 Bena Ultrasound
GROUP BY id(3333) 3 hits "-"
3333 Luis CT Scan
3333 Luis Ultrasound
3333 Luis LASER
There is a demo that I found on stackoverflow(http://jsfiddle.net/FNvsQ/1/) but the only problem I have is I want to include all rows having the same id under a dynamic header like
grouped by id(1111) then the expand/collapse icon (+/-)
var table = $('table')[0];
var rowGroups = {};
//loop through the rows excluding the first row (the header row)
while(table.rows.length > 0){
var row = table.rows[0];
var id = $(row.cells[0]).text();
if(!rowGroups[id]) rowGroups[id] = [];
if(rowGroups[id].length > 0){
row.className = 'subrow';
$(row).slideUp();
}
rowGroups[id].push(row);
table.deleteRow(0);
}
//loop through the row groups to build the new table content
for(var id in rowGroups){
var group = rowGroups[id];
for(var j = 0; j < group.length; j++){
var row = group[j];
if(group.length > 1 && j == 0) {
//add + button
var lastCell = row.cells[row.cells.length - 1];
$("<span class='collapsed'>").appendTo(lastCell).click(plusClick);
}
table.tBodies[0].appendChild(row);
}
}
//function handling button click
function plusClick(e){
var collapsed = $(this).hasClass('collapsed');
var fontSize = collapsed ? 14 : 0;
$(this).closest('tr').nextUntil(':not(.subrow)').slideToggle(400)
.css('font-size', fontSize);
$(this).toggleClass('collapsed');
}
解决方案
Here is the answer to my own question.
First id's are added to the table and the rows and there's a small change to the JS:
var table = $('table')[0];
var rowGroups = {};
//loop through the rows excluding the first row (the header row)
while (table.rows.length > 1) {
var row = table.rows[1];
var id = $(row.cells[0]).text();
if (!rowGroups[id]) rowGroups[id] = [];
if (rowGroups[id].length > 0) {
row.className = 'subrow';
$(row).slideUp();
}
rowGroups[id].push(row);
table.deleteRow(1);
}
//loop through the row groups to build the new table content
for (var id in rowGroups) {
var group = rowGroups[id];
for (var j = 0; j < group.length; j++) {
var row = group[j];
var notSubrow = false;
if (group.length > 1 && j == 0) {
//add + button
var lastCell = row.cells[row.cells.length - 1];
var rowId = row.id;
var tableId = table.id;
notSubrow = true;
//$("<span class='collapsed'>").appendTo(lastCell).click(plusClick);
}
table.tBodies[0].appendChild(row);
if (notSubrow) {
$('#' + tableId).find('#' + rowId).attr('class', 'subrow');
$('#' + tableId).find('#' + rowId).before("<tr class='subrowHeader' style='background:#E6E6FA;border-bottom:1px solid #708AA0 !important'><td colspan='3'> group by " + $(row.cells[0]).text() + " (" + group.length + ")" + "<span class='collapsed' onclick='plusClick(this)' style='float:left;display:inline'></td></tr>");
$('#' + tableId).find('#' + rowId).hide();
}
}
}
//function handling button click
function plusClick(e) {
var collapsed = $(e).hasClass('collapsed');
var fontSize = collapsed ? 14 : 0;
$(e).closest('tr').nextUntil(':not(.subrow)').slideToggle('fast').css('font-size', fontSize);
$(e).toggleClass('collapsed');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
<tr id="tr1">
<th>Parent ID</th>
<th>Parent Name</th>
<th>Study</th>
</tr>
<tr id="tr2">
<td>1111</td>
<td>Angela</td>
<td>XRAY</td>
</tr>
<tr id="tr3">
<td>2222</td>
<td>Bena</td>
<td>Untrasound</td>
</tr>
<tr id="tr4">
<td>3333</td>
<td>Luis</td>
<td>CT Scan</td>
</tr>
<tr id="tr5">
<td>1111</td>
<td>Angela</td>
<td>Untrasound</td>
</tr>
<tr id="tr6">
<td>3333</td>
<td>Luis</td>
<td>LCD</td>
</tr>
<tr id="tr7">
<td>3333</td>
<td>Luis</td>
<td>LASER</td>
</tr>
</table>
*Inorder to test copy and paste the code into http://jsfiddle.net/FNvsQ/1/ & In the Frameworks & Extensions panel, set onLoad to No wrap - in body.
这篇关于使用jquery / javascript根据单元格值对表格行进行分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
