0

我想在 jsp 页面中交替地将 css 应用于 thr。下面是我的代码。

<c:forEach var="aff" items="${report}">
        <tr class="**tital_black_second**">
    <input type="hidden" id="org_id" value="${aff.org_id}">
      <td width="74" class="td_text">&nbsp;</td>
      <td width="173" class="heading3 td_text">${aff.string}</td>
      <td width="168" class="td_text text3">${aff.posted}</td>
      <td width="134" class="td_text text3">${aff._sold}</td>
      <td width="118" class="td_text text3">${aff.of_commision}</td>
      <td width="126" class="td_text text3">${affl}</td>
      <td width="115" class="td_text text3"></td>
      <td width="129" class="td_text text3">&nbsp;</td>
</tr>
</c:forEach>

对于每个 tr 交替我想应用类，即当一个 tr 被绘制时，我想要 class="tital_black_second" 并且当第二个被绘制时 class="tital_black_first"。

我怎么能做到这一点。

提前致谢。

4

3 回答 3

1

您可以在 CSS 或 jQuery 中执行此操作，而不是在 jstl 中执行此操作。

CSS3 有一个:nth-child(arg)伪类，它允许我们控制交替行的显示。但这仅在现代浏览器中受支持，因此跨浏览器兼容性可能是一个问题。

tr:nth-child(odd)    { background-color:#ffffff; }
tr:nth-child(even)    { background-color:#000000; }

或者在 jQuery 中：

$("tr:odd").css("background-color", "#ffffff");
$("tr:even").addClass("evenRowClass");
于 2012-09-04T10:45:54.453 回答
1

您可以使用此处发布的解决方案：如何使用 JSP 替换 HTML 表格行颜色？

对于您的代码，它将是：

<c:forEach items="${report}" var="aff" varStatus="loopStatus">
  <tr class="${loopStatus.index % 2 == 0 ? 'tital_black_second' : 'tital_black_first'}">
    <input type="hidden" id="org_id" value="${aff.org_id}">
      <td width="74" class="td_text">&nbsp;</td>
      <td width="173" class="heading3 td_text">${aff.string}</td>
      <td width="168" class="td_text text3">${aff.posted}</td>
      <td width="134" class="td_text text3">${aff._sold}</td>
      <td width="118" class="td_text text3">${aff.of_commision}</td>
      <td width="126" class="td_text text3">${affl}</td>
      <td width="115" class="td_text text3"></td>
      <td width="129" class="td_text text3">&nbsp;</td>
</tr>
</c:forEach>
于 2012-09-04T10:52:53.403 回答
0

看看奇偶 CSS 规则。手动向每一行添加类是不必要的开销。

.yourtable-class tr:nth-child(even) { 
   // styles for your even rows
}

.yourtable-class tr:nth-child(odd) { 
   // styles for your odd rows
}
于 2012-09-04T10:45:05.997 回答