2

I am having a scenario in which I need to group the rows of a HTML table. The table is as follows:

<table style="border-collapse:collapse;" cellpadding="5" width="500px">
  <tr>
    <td>No.</td>
    <td>Project</td>
    <td>Status</td>
    <td>cost</td>
  </tr>
  
  <tr>
    <td>1</td>
    <td>Project1</td>
    <td>Open</td>
    <td>10</td>
  </tr>
  
  <tr>
    <td>2</td>
    <td>Project2</td>
    <td>Open</td>
    <td>20</td>
  </tr>
  
  <tr style="border-bottom:1pt solid black;">
    <td>3</td>
    <td>Project3</td>
    <td>Open</td>
    <td>200</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Project4</td>
    <td>Pending</td>
    <td>200</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Project6</td>
    <td>Pending</td>
    <td>200</td>
  </tr>
  
  <tr style="border-bottom:1pt solid black;">
    <td>6</td>
    <td>Project7</td>
    <td>Pending</td>
    <td>200</td>
  </tr>
  
  <tr>
    <td>7</td>
    <td>Project7</td>
    <td>closed</td>
    <td>200</td>
  </tr>
  
  <tr>
    <td>7</td>
    <td>Project8</td>
    <td>closed</td>
    <td>200</td>
  </tr>
</table>

When the status changes I am required to add a bottom border to the previous row thereby grouping the table rows as per their status.

The table is sorted according to the status text and I need to apply bottom border to the row after which the status text is changing. This will show the rows of the table grouped according to their status values.

I was thinking to have a one line selector instead of looping all over the table.

Thanks All.

13
  • 1
    Could you perhaps create an HTML fiddle of how you want it to look when the status changes?
    – user1248084
    Commented Jan 5, 2015 at 7:21
  • 1
    In addition to @Locercus I want to know how the status changes.
    – Zword
    Commented Jan 5, 2015 at 7:22
  • @Zword I will second that. Do you have the option of a function call or do you have to .live it?
    – user1248084
    Commented Jan 5, 2015 at 7:23
  • 2
    grouping is a broad term without some criteria and the expected output. A sort may qualify for example - but that isn't known.
    – charlietfl
    Commented Jan 5, 2015 at 7:24
  • @Locercus do edit anyway that it shows how the status changes and what u want onchange .If u update your question properly then your question will be reopened
    – Zword
    Commented Jan 5, 2015 at 7:26

2 Answers 2

4

If you structure your table a little bit, it would be easier for you. Add thead for the header row and tbody for the content rows. Then you could easily do this:

var last = null;
$("table tbody tr td:nth-child(3)").each(function() {
    if ((last) && (last != this.innerText)) {
        $(this).parent().addClass("group");
    } 
    last = this.innerText;
});

Assuming that your table is already sorted as indicated in your question, iterate over every 3rd td using nth-child(3), comparing the innerText with the last.

Working Fiddle: http://jsfiddle.net/abhitalks/ucedwhb0/

Snippet:

function groupRows() {
    var last = null;
    $("table tbody tr td:nth-child(3)").each(function () {
        if ((last) && (last != this.innerText)) {
            $(this).parent().addClass("group");
        }
        last = this.innerText;
    });
}

groupRows();
tr.group { border-top: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="border-collapse:collapse;" cellpadding="5" width="500px">
    <thead>
        <tr>
            <th>No.</th>
            <th>Project</th>
            <th>Status</th>
            <th>cost</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Project1</td>
            <td>Open</td>
            <td>10</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Project2</td>
            <td>Open</td>
            <td>20</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Project3</td>
            <td>Open</td>
            <td>200</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Project4</td>
            <td>Pending</td>
            <td>200</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Project6</td>
            <td>Pending</td>
            <td>200</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Project7</td>
            <td>Pending</td>
            <td>200</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Project7</td>
            <td>closed</td>
            <td>200</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Project8</td>
            <td>closed</td>
            <td>200</td>
        </tr>
    </tbody>
</table>

.

0
1

Here's a solution that will toggle a class on/off depending on row being last of that status. Thus when you resort on a staus change and call this it will also remove class on incorrect row(s)

 $('tr:gt(0)').each(function(){
    var $row =$(this),
        status = $(this).find('td').eq(2).text(),
        $nextRow=$row.next();
    if($nextRow.length){
        var isLastOfStatus = status !== $nextRow.find('td').eq(2).text();
        $row.toggleClass('divider', isLastOfStatus)
    }  
});

If you expect any white space added in markup within cells use $.trim() on the text values before comparing

DEMO

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.