jQueryでHTMLファイル上のCSS属性を変更する。 - 今年からリクルートでweb開発を始める僕の、勉強成果発表のブログ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="ja" lang="ja">
<head>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>公園の表</title>
    <script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
    <script type="text/javascript">// <![CDATA![
        window.onload = function() {

            $('tbody td').css( 'padding', '3px');
            $('tbody tr:even').css( 'background-color','#fc9');
            $('tbody tr:odd').css( 'background-color','#777');

        }
//]]></script>
</head>
<body>
    <table>
        <caption>東京の主な公園</caption>
        <thead>
            <tr><th>名称</th><th>場所</th></tr>
        </thead>
        <tbody>
            <tr><td>日比谷公園</td><td>千代田区</td></tr>
            <tr><td>代々木公園</td><td>渋谷区</td></tr>
            <tr><td>井の頭恩賜公園</td><td>武蔵野市</td></tr>
            <tr><td>なんちゃら公園</td><td>どっかにある</td></tr>
        </tbody>
    </table>
</body>
</html>

vimでバックをダークにして書くと、それっぽいなぁ・・・という自己満足にも触れながら
これで表示される結果が、こちら。

$('要素　その子要素').css('プロパティ名','値')
でCSSが変更可能です。

tr:odd,tr:even　という要素のは、
odd,evenはそれぞれ、奇数、偶数の意味で
奇数番目、偶数番目を判断してそこに対応しています。

ただし、最初の数は"０"なので、
一番上は、偶数になってます。注意。

2010/5/7
アクセスがあまりに多いのでコピペ出来るようにしました。