Question

159

Grouping table rows based on cell value using jquery/javascript

rated 0 times [ 165] [ 6] / answers: 1 / hits: 20175 / 9 Years ago, wed, august 12, 2015, 12:00:00

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');        

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaidyn

Add To Favorites

Follow

Total Points: 633

Total Questions: 102

Total Answers: 100

Location: Trinidad and Tobago

Member since Thu, Dec 1, 2022

2 Years ago

answered 9 Years ago chase · Accepted Answer

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'>&nbsp;group by&nbsp + $(row.cells[0]).text() + &nbsp;( + 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.