简体   繁体   中英

How can I add class to second td in row if last one td (8) has some content?

How can I add class to second td in row if last one td (8) has some content?

Html

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td></td>
    </tr>
</table>

Jquery

$('td:nth-child(8):not(:empty)').closest('tr').addClass('part');

CSS

table
{border:1px solid #333;}

td
{border:1px solid #333;}

.part
{background-color:red;}

FIDDLE

https://jsfiddle.net/jpLq21jv/

Use .find() with :nth-child selector:

$('td:nth-child(8):not(:empty)').closest('tr').find('td:nth-child(2)').addClass('part');

Working Demo

You have to use .siblings(selector) at this context,

$('td:nth-child(8):not(:empty)').siblings('td:nth-child(2)').addClass('part');

DEMO

try this script

$(document).ready(function() {
    $('tr').each(function() {
        if($(this).find('td:nth-child(8)').text().length > 0) {
            $(this).find('td:nth-child(2)').addClass("part");
        }
    });
});

You can try it

$('td:nth-child(8):not(:empty)').siblings('td:nth-child(2)').addClass('part');

Change in the css also

part

replace with

.part

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM