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

Jクエリ

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

下の画像のようなテーブルがたくさんあり、jqueryを使用して境界線を変更します（私はjqueryを少し知っています）が、境界線についていくつかの問題があります。Jquery は、最後の tr のすべての td の境界線を変更します。セレクターについて間違っています。どうすればこれを修正できますか?

JSフィドル

http://jsfiddle.net/g5qLc/

Answer 1

tr:last-child>td最後の行内のセルのみに直接影響を与えるようにしてください。

また、そのためにjQueryを使用しないでください。それを CSS に追加するだけです。

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

更新されたフィドル

Answer 2

これを試してください：

$(".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;
}

デモを見る