javascript - 如何使用 jQuery 更改嵌套表 td 边框宽度？

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;
}

查询

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

有很多如下图所示的表格，并使用 jquery 更改了一些边框（我知道一点 jquery），但是关于边框有一些问题。Jquery 在最后一个 tr 中更改所有 td 的边框。我对选择器有误。我怎样才能解决这个问题？

JSfiddle

http://jsfiddle.net/g5qLc/

Answer 1

试试这个，

$(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'});
});

小提琴 http://jsfiddle.net/kTBum/3/

Answer 2

尝试tr:last-child>td只影响最后一行内的单元格。

另请注意，您不应该为此使用 jQuery。只需将其添加到您的 CSS 中：

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

更新小提琴

Answer 3

试试这个：

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

我也将css更改为：

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

从原始CSS：

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

看演示