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

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>

JQUERY

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

有很多像下图这样的表，使用jquery（我知道一点jquery）可以更改一些边框，但是关于边框存在一些问题。Jquery更改最后一个tr中所有td的边框。我对选择器的看法是错误的。我怎样才能解决这个问题

JSfiddle

试试这个

$(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

尝试

tr:last child>td

仅直接影响最后一行中的单元格

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

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

试试这个：

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

---

看

这很重要吗？IE7仅由已主动禁用Windows Update的用户使用。如果它们让我们的生活变得困难，我们为什么要关心它们呢？那么，我想你应该保留jQuery。但是使用我给你的选择器，而不是你当前的选择器。但是行数是可变的，我只是作为一个例子来做的example@midstack上面的代码对表中的行数没有限制。只有最后一个tr的边框是

none

。

.tb1

底部的灰色边框应该隐藏。正如所说的@Kolink，tb1底部的灰色边框应该隐藏hidden@midstack现在测试上述答案。

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