javascript - 如何避免将 CSS 类设置为两个表中的一个表？

Question

我有一个 ID 为 outerTable 的表。

在第一个表中还有另一个表的 ID innerTable。

我希望一个类仅应用于 outerTable 的偶数行。

我尝试了以下方法:

$(document).ready(function() {
        var i, j, tables, rows;

        tables = document.getElementsByTagName('table');

        for ( i = 0; i < tables.length; i += 1 ) {
            rows = tables[i].rows;

            for ( j = 0; j < rows.length; j += 1 ) {
                rows[j].className = j % 2 ? 'even' : 'odd';
            }
        }
    });

但是该类适用于两个表。

在上面的代码中我尝试使用:

tables = document.getElementsByTagName('table #outerTable');

但它不起作用。

这是我的 HTML/PHP 代码:

<table border="0" id="outerTable" cellspacing="0">
<?php
    for($i=0;$i<$num;$i++)
        {
            while($row = mysql_fetch_assoc($agent_res))
    {
    ?>
<tr valign="top">
    <td width="200px"><?php echo $row['agent_name']; ?></td>
    <td width="100px;"><?php echo $row['port']; ?></td>
    <td width="200px"><?php echo $row['address']; ?></td>
    <td>
        <table align="left" id="innerTable">
            <tr>
                <td><b>Contact</b></td>
                <td>: </td>
                <td><?php echo $row['contact']; ?>      </td>
            </tr>
            <tr>
                <td><b>Email ID</b></td>
                <td>: </td>
                <td><?php echo $row['email_id']; ?></td>
            </tr>
            <tr>
                <td><b>Telephone</b></td>
                <td>: </td>
                <td><?php echo $row['tel']; ?></td>
            </tr>
            <tr>
                <td><b>Fax</b></td>
                <td>: </td>
                <td><?php echo $row['fax']; ?></td>
            </tr>
            <tr>
                <td><b>Website</b></td>
                <td>: </td>
                <td><?php echo $row['website_address']; ?></td>
            </tr>
        </table>
    </td>
</tr>
<?php
    }
    }
    ?>  
</table>

所以请任何人帮我解决这个问题。

这是针对这种情况的 jsFiddle:DEMO

Answer 1

将样式选择器更改为

#outerTable > tbody > tr > td

和

#outerTable > tbody > tr.even > td

参见 Fiddle Demo