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

Question

我正在应用 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>

Answer 1

习惯了这种方式

Even或odd为您table现在定义.tableBg class定义您的表

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

Answer 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);

希望这将有助于解决您的问题。