有条件地改变表格行的背景颜色

Question

I have a table with 2 rows and I want to apply background color to the second row(Specific row). And the second row is displayed conditionally. Some pages may have second row and some may not. I tried to set the background-color using jQuery but it didn't work. Please suggest if that is possible only with css.

---

Code:

---

<table>
    <tr>
        <td>overload</td>
        <td>one</td>
    </tr>
    <tr>
        <td>workload</td>
        <td>two</td>
    </tr>
    <tr>
        <td>capacity</td>
        <td>three</td>
    </tr>
</table>

Now, I want to apply background-color to the second row. So, the second row may or may not present all the time. If there is no second row, the third row becomes the second row and I don't want background-color to be applied to that row.

I have tried following with jQuery:

function applyBGColor() {
    var secondRow = $('table tr:nth-child(2) td:first-of-type').text();
    if(secondRow === 'workload') {
        $('table tr:nth-child(2)').css('background-color', '#f5f5f5')
    }
}

But when I debug it the 'secondRow' variable gets empty string. But when directly type it in the console like $('table tr:nth-child(2) td:first-of-type').text() this, it gives me the text of the td.

Answer 1

You shouldn't be checking if row exists based on your text. Text is easily changeable. Give your second row an id property and access your row with $('#id') .

Something like this:

<table>
    <tr>
        <td>overload</td>
        <td>one</td>
    </tr>
    <tr id="second-row">
        <td>workload</td>
        <td>two</td>
    </tr>
    <tr>
        <td>capacity</td>
        <td>three</td>
    </tr>
</table>

and then:

function applyBGColor() {
    if($('#second-row').length) {
        $('#second-row').css('background-color', '#f5f5f5')
    }
}

Answer 2

Please call function applyBGColor(); Then check if the HTML

 applyBGColor(); function applyBGColor(){ var secondRow = $('table tr:nth-child(2)').html(); console.log(secondRow); if(secondRow) { $('table tr:nth-child(2)').css('background-color', '#f5f5f5') } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>overload</td> <td>one</td> </tr> <tr> <td>workload</td> <td>two</td> </tr> <tr> <td>capacity</td> <td>three</td> </tr> </table>