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.
grouping
is a broad term without some criteria and the expected output. A sort may qualify for example - but that isn't known.