0

Good Day, I have table of sample following data 

ID  Date         Loc  Time From  Time To
1   01-jan-2018  10   08:15      17:00
1   02-jan-2018  10   08:15      17:00
**1   03-jan-2018  10   08:15      09:00
1   03-jan-2018  20   09:15      11:30
1   03-jan-2018  30   11:45      14:00
1   03-jan-2018  10   14:15      17:00**
1   04-jan-2018  10   08:15      17:00

In this table I wanted to group records of same Date such that following was the output:

ID  Date         Loc  Time From  Time To
1   01-jan-2018  10   08:15      17:00
1   02-jan-2018  10   08:15      17:00
**1   03-jan-2018  10   08:15      17:00**
1   03-jan-2018  10   08:15      09:00
1   03-jan-2018  20   09:15      11:30
1   03-jan-2018  30   11:45      14:00
1   03-jan-2018  10   14:15      17:00
1   04-jan-2018  10   08:15      17:00

Grouping was achieved using below question:

Grouping table rows based on cell value using jquery/javascript

But in order to achieve the summary row at the top of the group I was using the approach to get the first row of the group make a copy modify it for summary then add it at the start of group through two different approaches showing in following code:

for (var id in rowGroups) {
  var group = rowGroups[id];
  // Loop through and add header rows to rowgroups
  if (group.length > 1)
  {
    /*  // Method # 1 using Array assignment
    var rowmain = group.slice(0);
    rowmain.cells[2].innerText = "";
    rowmain.cells[3].innerText = group[0].cells[3].innerText;
    rowmain.cells[4].innerText = group[group.length - 1].cells[4].innerText;
    */

    /*
    var rowmain = $(group)[0];
    $($(rowmain)[0]).find('td')[2].innerText = "";  // Location
    $($(rowmain)[0]).find('td')[3].innerText = group[0].cells[3].innerText;
    $($(rowmain)[0]).find('td')[4].innerText = group[group.length - 1].cells[4].innerText;
    */
    group.unshift(rowmain)
  }

  for (var j = 0; j < group.length; j++) {
    var row = group[j];
    if (group.length > 1 && j == 1) {
      row.className = 'subrow';
    }
    if (group.length > 1 && j == 0) {
      var firstCell = row.cells[0];
      $("<span class='collapsed'>").appendTo(firstCell).click(plusClick);
    }
    table.tBodies[0].appendChild(row);
  }
}

But it seems that javascript array is used as reference so in each case when I pick the first row of group (array element) and modify the copy it also changes the original. Please help how to achieve this.

Thanks.

Improve this question
5
  • "But it seems that javascript array is used as reference…". Yes. All objects are referenced, so var group = rowGroups[id] creates a second reference to the object. Perhaps you want to copy it: var group = rowGroups[id].slice(). Commented Jan 5, 2018 at 6:08
  • I have used slice in my first approach var rowmain = group.slice(0); Commented Jan 5, 2018 at 6:35
  • I don't understand your example, what is the **? And a row has values but you just move the cell 17:00 to the second row without moving the other rows. Do you want to sort rows by a certain column? Commented Jan 5, 2018 at 7:19
  • No, I was trying to make the row bold by **, What i want to do is create a row group for 03-Jan-2018, add a summary row at the top of the group and then then make the rows as sub row. the sub row part is working through the link I mentioned, but I cant get the summary row. Commented Jan 5, 2018 at 7:25
  • It would help if you post a minimal, complete and verifiable example as a runnable snippet. Commented Jan 6, 2018 at 23:50
Related questions
0
Group Table Rows into an array
3
Javascript array: how to group
0
How to put the elements of array of arrays in table cells?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.