Question

我想在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”。

我如何才能实现这一目标。

先谢谢。

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

Answer 2

您可以使用此处发布的解决方案：How to alternate HTML table row colors using JSP?

对于您的代码，它将是：

<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>

Answer 3

看看even and odd CSS rules。手动向每一行添加类是不必要的开销。

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

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

交替应用类到tr

3 个答案: