javascript - How can I change nested table td border width using jQuery? - Stack Overflow

admin管理员组

文章数量:1431037

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?

JSfiddle

/

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?

JSfiddle

http://jsfiddle/g5qLc/

• javascript
• jquery
• css
• html-table
• jquery-selectors

Share Improve this question Follow edited Nov 14, 2017 at 12:05 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked May 29, 2013 at 10:56 midstackmidstack 2,12377 gold badges4848 silver badges7474 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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/kTBum/3/

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

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

本文标签： javascriptHow can I change nested table td border width using jQueryStack Overflow