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

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

<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（我知道一点点jquer y）但是关于边界存在一些问题。 jquery在最后tr中更改所有td的边界。我对选择器错误。我怎样才能解决这个问题？

enter image description here

的jsfiddle

http://jsfiddle.net/g5qLc/

来源

2013-05-29 midstack

试试这个，

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

来源

2013-05-29 10:59:22

'Code'和'Fiddle'更新 –

但行数是可变的，我只是做了它作为一个例子 – midstack

@midstack上面的代码对表中的行数没有约束。只有最后一个tr的边界将是'none'。 –

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

另外请注意，你不应该使用jQuery。只需将它添加到你的CSS：

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

Updated Fiddle

来源

2013-05-29 11:02:37

是的，我做了，但没有在ie7 – midstack

工作是否重要？ IE7仅供积极禁用Windows Update的用户使用。如果他们让我们的生活变得艰难，我们为什么要关心他们？ –

你是对的，但公司不同意，不幸的是 – midstack

试试这个：

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

来源

2013-05-29 11:14:28 Edper

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

回答

相关问题