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

【问题标题】：How can I change nested table td border width using jQuery?如何使用 jQuery 更改嵌套表 td 边框宽度？
【发布时间】：2013-05-24 14:28:40
【问题描述】：

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");

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

JSfiddle

http://jsfiddle.net/g5qLc/

【问题讨论】：

标签： javascript jquery css html-table jquery-selectors

【解决方案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/

【讨论】：

但是行数是可变的，我只是做例子
@midstack 上面的代码对表中的行数没有限制。只有最后一个 tr 的边框是 none。
.tb1底部的灰色边框应该被隐藏。
俗话说@Kolink tb1 底部的灰色边框应该被隐藏
@midstack 现在测试上面的答案。

【解决方案2】：

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

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

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

Updated Fiddle

【讨论】：

这很重要吗？ IE7 仅供主动禁用 Windows 更新的人使用。如果他们让我们的生活变得困难，我们为什么要关心他们？
那么，我想你应该保留 jQuery。但是使用我给你的选择器而不是你当前的选择器。

【解决方案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;
}

见Demo

【讨论】：