How can I change nested table td border width using jQuery?

Question

HTML

<hr />
<h1>Table-1</h1>
<hr />
<table class="tb1">
    <tr>
        <td>rw1</td>
        <td>rw1</td>
        <td>rw1</td>
    </tr>
    <tr>
        <td>rw1</td>
        <td>rw1</td>
        <td>rw1</td>
    </tr>
    <tr>
        <td colspan="3">
            <table class="tb2">
                <tr>
                    <td>tbrw2</td>
                    <td>tbrw2</td>
                    <td>tbrw2</td>
                </tr>
                <tr>
                    <td>tbrw2</td>
                    <td>tbrw2</td>
                    <td>tbrw2</td>
                </tr>
            </table>

        </td>
    </tr>
     <tr>
        <td>rw1</td>
        <td>rw1</td>
        <td>rw1</td>
    </tr>
    <tr>
        <td colspan="3">
            <table class="tb2">
                <tr>
                    <td>tbrw2</td>
                    <td>tbrw2</td>
                    <td>tbrw2</td>
                </tr>
                <tr>
                    <td>tbrw2</td>
                    <td>tbrw2</td>
                    <td>tbrw2</td>
                </tr>
            </table>            
        </td>
    </tr>
</table>

<hr />
<h1>Table-2</h1>
<hr />

<table class="tb1">
    <tr>
        <td>rw1</td>
        <td>rw1</td>
        <td>rw1</td>
    </tr>
    <tr>
        <td>rw1</td>
        <td>rw1</td>
        <td>rw1</td>
    </tr>
    <tr>
        <td colspan="3">
            <table class="tb2">
                <tr>
                    <td>tbrw2</td>
                    <td>tbrw2</td>
                    <td>tbrw2</td>
                </tr>
                <tr>
                    <td>tbrw2</td>
                    <td>tbrw2</td>
                    <td>tbrw2</td>
                </tr>
            </table>

        </td>
    </tr>
     <tr>
        <td>rw1</td>
        <td>rw1</td>
        <td>rw1</td>
    </tr>
    <tr>
        <td colspan="3">
            <table class="tb2">
                <tr>
                    <td>tbrw2</td>
                    <td>tbrw2</td>
                    <td>tbrw2</td>
                </tr>
                <tr>
                    <td>tbrw2</td>
                    <td>tbrw2</td>
                    <td>tbrw2</td>
                </tr>
            </table>            
        </td>
    </tr>
</table>

CSS

.tb1{
    border-collapse:collapse;
}

.tb1 tr td {
    border-bottom:1px solid #ccc;
    text-align:center;
    padding:10px;
}

.tb2{
    border-collapse:collapse;
}

.tb2 tr td {
    border-bottom:1px solid #f00;
    text-align:center;
    padding:10px;
}

JQUERY

$(".tb1 tr:last-child td,.tb2 tr:last-child td").css("border","none");

There are a lot of table like below image and change some border with using jquery (I know little bit jquery) but there are some problems about border. Jquery change border of all td in last tr.I'm wrong about selectors. How can I fix this?

enter image description here

JSfiddle

http://jsfiddle.net/g5qLc/

Rohan Kumar · Accepted Answer · 2013-05-29T11:27:40.187

2

Try this,

$(function(){
    $('table.tb2').find('tr td').css({'border-bottom':'1px solid red'});
    $('table.tb2').find('tr:last td').css({'border-bottom':'none'});
    $('table.tb2').closest('td').css({'border-bottom':'none'});
});

Fiddle http://jsfiddle.net/kTBum/3/

edited May 29 '13 at 11:27

answered May 29 '13 at 10:59

Rohan Kumar

40,431
11
76
106

but the number of rows is changeable,I just did it as an example – midstack May 29 '13 at 11:10
@midstack the above code has no bound on number of rows in table. Only the last tr's border will be `none`. – Rohan Kumar May 29 '13 at 11:12
The gray border at the bottom of `.tb1` should be hidden. – Niet the Dark Absol May 29 '13 at 11:18
As the saying @Kolink the grey border at the bottom of tb1 should be hidden – midstack May 29 '13 at 11:23
@midstack Test the above answer, now. – Rohan Kumar May 29 '13 at 11:27
@midstack the css .tb1 tr td { border-bottom:1px solid #ccc;} is actually overriding your jquery bottom-border coloring. And that's why probably it is not showing. In my case I change the border 2px in order for the changes to be seen. – Edper May 29 '13 at 11:31

score 1 · Answer 2 · answered May 29 '13 at 11:02

1

Try tr:last-child>td to only affect cells directly within the last row.

Also note that you shouldn't use jQuery for that. Just add it to your CSS:

.tb1 tr:last-child>td,.tb2 tr:last-child>td {border:none}

Updated Fiddle

answered May 29 '13 at 11:02

Niet the Dark Absol

320,036
81
464
592

1

Is that important? IE7 is only used by people who have actively disabled Windows Update. If they make our life difficult, why should we care about them? – Niet the Dark Absol May 29 '13 at 11:05
Well then, I guess you should keep the jQuery. But use the selector I have given you instead of your current one. – Niet the Dark Absol May 29 '13 at 11:17

score 0 · Answer 3 · answered May 29 '13 at 11:14

Try this one:

$(".tb2 tr:first-of-type").css("border-bottom","2px solid red");

I change also the css to:

.tb2 tr td {
 text-align:center;
 padding:10px;
}

From the original css:

.tb2 tr td {
border-bottom:1px solid #f00;
text-align:center;
padding:10px;
}

See Demo

How can I change nested table td border width using jQuery?

3 Answers3

Linked