Raggruppamento delle righe della tabella in base al valore della cella utilizzando jquery / javascript

Ho cercato di risolvere questo per giorni. Apprezzerei molto qualsiasi aiuto tu possa darmi per risolvere questo problema. Ho una tabella simile alla seguente:

ID Name Study 1111 Angela XRAY 2222 Bena Ultrasound 3333 Luis CT Scan 1111 Angela Ultrasound 3333 Luis XRAY 3333 Luis LASER 

e voglio raggrupparli come:

 ID Name Study GROUP BY id(1111) 2 hits "+" 2222 Bena Ultrasound GROUP BY id(3333) 3 hits "+" 

E se si fa clic su “+”, si espanderà:

  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 

C’è una demo che ho trovato su stackoverflow ( http://jsfiddle.net/FNvsQ/1/ ) ma l’unico problema che ho è che voglio includere tutte le righe che hanno lo stesso id sotto un’intestazione dynamic come

raggruppato per ID (1111) quindi l’icona di espansione / compressione (+/-)

 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  1 && j == 0) { //add + button var lastCell = row.cells[row.cells.length - 1]; $(" 

Ecco la risposta alla mia domanda.

I primi ID vengono aggiunti alla tabella e alle righe e c’è una piccola modifica al 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; //$(" 
  
Parent ID Parent Name Study
1111 Angela XRAY
2222 Bena Untrasound
3333 Luis CT Scan
1111 Angela Untrasound
3333 Luis LCD
3333 Luis LASER

Come confronto, ecco una funzione POJS che è funzionalmente equivalente nella stessa quantità di codice. Tuttavia non usa una grande libreria esterna.

Utilizza lo stesso algoritmo di raccolta di tutte le righe con lo stesso valore nella prima cella, quindi modifica la tabella per inserire le righe di intestazione e raggruppare le righe di dati.

 // Group table rows by first cell value. Assume first row is header row function groupByFirst(table) { // Add expand/collapse button function addButton(cell) { var button = cell.appendChild(document.createElement('button')); button.className = 'toggleButton'; button.textContent = '+'; button.addEventListener('click', toggleHidden, false); return button; } // Expand/collapse all rows below this one until next header reached function toggleHidden(evt) { var row = this.parentNode.parentNode.nextSibling; while (row && !row.classList.contains('groupHeader')) { row.classList.toggle('hiddenRow'); row = row.nextSibling; } } // Use tBody to avoid Safari bug (appends rows to table outside tbody) var tbody = table.tBodies[0]; // Get rows as an array, exclude first row var rows = Array.from(tbody.rows).slice(1); // Group rows in object using first cell value var groups = rows.reduce(function(groups, row) { var val = row.cells[0].textContent; if (!groups[val]) groups[val] = []; groups[val].push(row); return groups; }, Object.create(null)); // Put rows in table with extra header row for each group Object.keys(groups).forEach(function(value, i) { // Add header row var row = tbody.insertRow(); row.className = 'groupHeader'; var cell = row.appendChild(document.createElement('td')); cell.colSpan = groups[value][0].cells.length; cell.appendChild( document.createTextNode( 'Grouped by ' + table.rows[0].cells[0].textContent + ' (' + value + ') ' + groups[value].length + ' hits' ) ); var button = addButton(cell); // Put the group's rows in tbody after header groups[value].forEach(function(row){tbody.appendChild(row)}); // Call listener to collapse group button.click(); }); } window.onload = function(){ groupByFirst(document.getElementById('table1')); } 
 table { border-collapse: collapse; border-left: 1px solid #bbbbbb; border-top: 1px solid #bbbbbb; } th, td { border-right: 1px solid #bbbbbb; border-bottom: 1px solid #bbbbbb; } .toggleButton { float: right; } .hiddenRow { display: none; } 
 
Parent ID Parent Name Study
1111 Angela XRAY
2222 Bena Ultrasound
3333 Luis CT Scan
1111 Angela Ultrasound
3333 Luis LCD
3333 Luis LASER