在表上应用 nth-child(even) 不适用于通过 jsp 生成的动态表，但适用于静态表答案

【问题标题】：Applying nth-chlid(even) on table not working on dynamic table generated through jsp but works with static table在表上应用 nth-child(even) 不适用于通过 jsp 生成的动态表，但适用于静态表
【发布时间】：2013-04-26 05:59:17
【问题描述】：

我正在应用 css 来使用 nth-child(even) 更改交替行的颜色。如果行是静态的，它是工作文件，但如果我使用 jsp 动态生成表，则不应用 css。如何解决？

css 是：

table tr:nth-child(odd)
  {
    background-color: #94B8B8;
  }
table tr:nth-child(even)
  {
    background-color: #FFFFFF;
  }

而jsp是：

    <c:forEach var="item" items="${items}" varStatus="i" begin="0" step="1">
 <tr>
<td>some data</td>
<td>some data</td>
 </tr>
</c:forEach>

生成的 html 看起来像：

            <tr onclick="selectRow(this)" id="1" >
                <td>
                    item1


            </td>
                <td>i1 </td>

            </tr>



            <tr onclick="selectRow(this)" id="2" >
                <td>
                    Item2


            </td>
                <td> 2 </td>

            </tr>

【问题讨论】：

你生成的html是什么样子的。
查看我提到生成的html的编辑代码

标签： css jsp jstl

【解决方案1】：

习惯这种方式

Even 或 odd 用于您的 table，现在定义 .tableBg class 定义您的表

.tableBg tr:nth-child(odd)      { background-color:#eee; }
.tableBg tr:nth-child(even)     { background-color:#fff; }

【讨论】：

【解决方案2】：

您如何将生成的代码添加到现有文档中？我在直接编辑表格的 html 时遇到了这个问题。产生问题的代码如下所示：

var table = document.getElementById('myTable');
table.innerHTML = "<tr>             \
                     <td>xx</td>    \
                     ...            \
                   </tr>";

为了解决这个问题，我创建了一个 tbody 元素，编辑了它的 html，然后将该元素附加到表格中。该代码看起来像：

var table = document.getElementById('myTable');
var tbody = document.createElement('tbody');
tbody.innerHTML = "<tr>             \
                     <td>xx</td>    \
                     ...            \
                   </tr>";
table.appendChild(tbody);

希望这对您的问题有所帮助。

【讨论】：