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

问题

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.net/g5qLc/

回答1:

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/

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/16812022/how-can-i-change-nested-table-td-border-width-using-jquery

标签

javascript

jquery

css

html-table

jquery-selectors