+ -
当前位置:首页 → 问答吧 → 有关jquery选择器

有关jquery选择器

时间:2009-09-07

来源:互联网

在一个表格中有四行,最后一行里是一个表格。
我想当鼠标移动到某一行时,该行变背景色。
但是当我移动到最后一行时,我不想让其变背景色。
怎么写?

作者: wchhuangya   发布时间: 2009-09-07

$("tr:last ").siblings().mouseove(function(){
             //切换背景色的代码
});

作者: ziyou   发布时间: 2009-09-07

不对的呀 我现在把源码贴出来,麻烦你看一下。

html源码

          <table id="table1" style="width:50%; border:blue 1px solid; text-align:center;">
                    <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>QQ</th>
                        <th>Email</th>
                    </tr>
                    <tr>
                        <td>张三</td>
                        <td>22</td>
                        <td>123456</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr>
                        <td>张三</td>
                        <td>22</td>
                        <td>123456</td>
                        <td>[email protected]</td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <table>
                            <table id="table2" style="border:red 1px solid; width:50%;">
                                <tr>
                                    <td colspan="4">路人甲(id=table2)</td>
                                </tr>
                            </table>
                            </table>
                        </td>
                    </tr>
                </table>

在id=table1的表格的最后一行,嵌套了一个表格id=table2。我想当鼠标移动到id=table1表格的1、2、3行时,这些行的背景色改变;当鼠标移动到第四行时,该行的背景色不改变。
不知道jquery的代码怎么写?请不吝赐教!

作者: wchhuangya   发布时间: 2009-09-07

给第4行加个id
 $("#tr4").siblings().mouseover(function(){
        $(this).css("background-color","red");
 });
[ 此帖被ziyou在2009-09-07 23:12重新编辑 ]

作者: ziyou   发布时间: 2009-09-07

最简单的办法,给想变色的行套上一个<tbody>就行了,然后jquery选择<tbody>里的行来变色。

$("table tbody tr").hover(
    //变色代码
);

html部分:

<table>
<tbody>
<tr>
<td></td>
……
</tr>
……//想变色的tr
</tbody>

<tr>
<td></td>
……
</tr>//不想变色的tr
</table>

作者: wlntt   发布时间: 2009-09-08

相关阅读 更多