CODEWITHSUNDEEP
jqueryhtmlcss
user7592363
user7592363

Reputation:

How to make alternate table rows colored in collapsible table?

UPDATED THE HTML: I have made my HTML table collapsible using a plugin which gives the rows that do not have any other parents as data-parent="". Here I am only showing the parent rows and not their children in the following HTML:

<table>
<thead>
    <tr>
        <th>Name</th>
        <th>Week1</th>
        <th>Week2</th>
        <th>Week3</th>
        <th>Week4</th>
    </tr>
</thead>
<tbody>
    <tr data-parent=""> //should be grey
        <td>+John</td>
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Hunohn</td>//ignore
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
    <tr data-parent="">//white
        <td>+Boney</td>
        <td>90</td>
        <td>40</td>
        <td>10</td>
        <td>80</td>
    </tr>
    <tr data-parent=""> //grey
        <td>Dwihn</td>
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
    <tr data-parent="">//white
        <td>+Arkon</td>
        <td>80</td>
        <td>20</td>
        <td>70</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Tyulor</td>//ignore
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
</tbody>
</table>

I want to give alternate row colors to only the rows that have data-parent="" irrespective of the data that it has. The data rows are sortable. Even after sorting rows with data-parent="" should have alternate row colors.

Upvotes: 1

Views: 616

Answers (3)

blecaf
blecaf

Reputation: 1645

This targets the "data-parent" alternatively. Code Updated

table tr {
  background: #fff;
}
tbody tr[data-parent=""]{
  background: grey;
}
tbody tr[data-parent=""] ~ tr[data-parent=""]:nth-child(even){
  background: yellow;
}
<table>
<thead>
    <tr>
        <th>Name</th>
        <th>Week1</th>
        <th>Week2</th>
        <th>Week3</th>
        <th>Week4</th>
    </tr>
</thead>
<tbody>
    <tr data-parent=""> //should be grey
        <td>+John(grey)</td>
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Hunohn</td>//ignore i.e white as background color
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Hunohn</td>//ignore i.e white as background color
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
    <tr data-parent="">//yellow
        <td>+Boney(yellow)</td>
        <td>90</td>
        <td>40</td>
        <td>10</td>
        <td>80</td>
    </tr>
    <tr data-parent=""> //grey
        <td>+Dwihn(grey)</td>
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
    <tr data-parent="">//yellow
        <td>+Arkon(yellow)</td>
        <td>80</td>
        <td>20</td>
        <td>70</td>
        <td>50</td>
    </tr>
    <tr data-parent="6">
        <td>Tyulor</td>//ignore
        <td>10</td>
        <td>50</td>
        <td>20</td>
        <td>30</td>
    </tr>
</tbody>
</table>

Upvotes: 1

philr
philr

Reputation: 1940

use the tr:nth-child(even) and tr:nth-child(odd) selectors

FINAL EDIT: made it work with the data-parent attribute being empty

https://jsfiddle.net/x6r8rq6a/4/

Upvotes: 1

gaganshera
gaganshera

Reputation: 2639

Try:

tr[data-parent=""]:nth-child(even) {background: #CCC}

This will color every even tr with data-parent="" gray colored. Also, since its simple css, sorting will change the color accordingly.

Upvotes: 0

Related Questions