iT邦幫忙

0

jQuery表格變色

我想使第一層表格的雙數行變色,但是$('#tb tr:odd').css({background:'#DDD'}); 似乎會影響到td中的table
如下圖

如果使用$('#tb>tr:odd').css({background:'#DDD'});則表格都沒變色,不知道是哪裡出了問題,希望有人能解答一下,謝謝

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#tb tr:odd').css({background:'#DDD'});
});
</script>
<style type="text/css">
#tb {
    width: 400px;
    border-collapse: collapse;
}

td { width: 50%; }
</style>



    <table id="tb" border="1">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>
                <table border="1">
                    <tr>
                        <td>a</td>
                        <td>b</td>
                    </tr>
                    <tr>
                        <td>c</td>
                        <td>d</td>
                    </tr>
                </table>
            </td>
            <td>6</td>
        </tr>
    </table>

1 個回答

22
fillano
iT邦超人 1 級 ‧ 2009-01-06 18:38:13
最佳解答

簡單的做法是加一行程式(不想組一個很複雜的selector):

<pre class="c" name="code">
$('table:not(#tb) tr').css({background:'#FFF'});
看更多先前的回應...收起先前的回應...
fillano iT邦超人 1 級 ‧ 2009-01-07 16:11:02 檢舉

阿,不能用補充回答...

簡單地說,你的html結構需要過濾取出的tr的parentNode,但是jquery沒有辦法這樣做。我透過hack jquery的source加了一個filter來做,但是這樣做很危險,只是我不熟悉怎麼做他的外掛,也忽略了jquery內部的約定跟作法,所以僅供參考。

方法是在jquery-1.2.6.js的大約1391行有一個odd: function(a,i){...
我在下面加一行程式:
[code]
gpt: function(a,i,m){return a.parentNode.parentNode.getAttribute("id")==m[3];},
[/code]

然後把你網頁中的程式改成
[code]
$('#tb tr:gpt(tb):odd').css({background:'#DDD'});
[/code]

就可以了。(出問題不負責)

fillano iT邦超人 1 級 ‧ 2009-01-07 16:29:12 檢舉

或是這樣改:

<script type="text/javascript">
jQuery.extend( jQuery.expr[":"], {gpt: function(a,i,m){return a.parentNode.parentNode.getAttribute("id")==m[3];}});
$(document).ready(function() {
$('#tb tr:gpt(tb):odd').css({background:'#DDD'});
});
</script>

不管你有沒有用到tbody,在dom裡面tr一定會放在tbody裡面,所以用兩次parentNode取到table,然後檢查id是否是tb。上一段程式是這樣運作的,但是基本上只符合你的case,並不是可以通用的東西。

fillano iT邦超人 1 級 ‧ 2009-01-07 17:06:04 檢舉

補充說明:上面這個方法是官方版加filter的方法,所以不必去動jquery的source。

fillano iT邦超人 1 級 ‧ 2009-01-07 17:34:13 檢舉

再測試了一下,我想最佳解是這樣:
$(document).ready(function() {
$('#tb tr:odd').filter(
function(i){
return this.parentNode.parentNode.getAttribute("id")=="tb";
}
).css({background:'#DDD'});

就是他過濾出來的node set你再用自己的filter function過濾一次。

fillano iT邦超人 1 級 ‧ 2009-01-07 17:36:00 檢舉

抱歉試了這麼多次,因為jquery不太熟。

我要發表回答

立即登入回答