CSS实现奇偶数行背景色不同

时间：2022-09-09 14:48:39
如果是固定的表那么我知道怎么做,关键是我的表是用c:forEach打印出来的,
怎么去判断本行是奇数行偶数行啊然后调用相应的样式表? 


<c:forEach var="mX" items="${mmXX}" varStatus="status">

		<tr class="">

			<td>

				${status.count }

			</td>

			<td>

				${mX.ID }

			</td>

			<td>

				${mX.Name }

			</td>

			<td>

				<input type="button" value="查询"

					onclick="submitSearch('${mX.ID}')" />

			</td>

			</tr>

				</c:forEach>

这个${status.count }是由数据库里面的行数决定的.
或者说说你们是怎么实现的,有现成的代码参考的我给你加分!

5 个解决方案

#1

forEach 不是有一个序列吗，你用一个IF判断，如果这个序列磨2等于0，那它肯定是偶数，就把它变色。

#2

<c:forEach items="${mmXX}" var="mX" varStatus="status"> 
  <tr class="row$(status.count%2)">  
    <td>。。。。。</td>
    ... 
  </tr> 
</c:forEach> 
 

#3

jquery也可以：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--   引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" >
$(function(){// dom元素加载完毕
   $('#tb tr:even').css("backgroundColor","#888");
   //获取id为tb的元素,然后寻找他下面的tbody标签，再寻找tbody下索引值是偶数的tr元素,
   //改变它的背景色.
})
</script>
</head>
<body>
<table id="tb">

<tr><td>第一行</td><td>第一行</td></tr>
<tr><td>第二行</td><td>第二行</td></tr>
<tr><td>第三行</td><td>第三行</td></tr>
<tr><td>第四行</td><td>第四行</td></tr>
<tr><td>第五行</td><td>第五行</td></tr>
<tr><td>第六行</td><td>第六行</td></tr>
<tr><td>第7行</td><td>第7行</td></tr>
<tr><td>第8行</td><td>第8行</td></tr>

</table>
</body>
</html>

#4

引用 2 楼  的回复:
<c:forEach items="${mmXX}" var="mX" varStatus="status"> 
  <tr class="row$(status.count%2)">  
    <td>。。。。。</td>
    ... 
  </tr> 
</c:forEach>




应该用status.index而非status.count

#5

引用 4 楼  的回复:
引用 2 楼  的回复:

<c:forEach items="${mmXX}" var="mX" varStatus="status">
<tr class="row$(status.count%2)">
<td>。。。。。</td>
...
</tr>
</c:forEach>




应该用status.index而非status.count


好像status.count也行！

#1

forEach 不是有一个序列吗，你用一个IF判断，如果这个序列磨2等于0，那它肯定是偶数，就把它变色。

#2

<c:forEach items="${mmXX}" var="mX" varStatus="status"> 
  <tr class="row$(status.count%2)">  
    <td>。。。。。</td>
    ... 
  </tr> 
</c:forEach> 
 

#3

jquery也可以：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--   引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" >
$(function(){// dom元素加载完毕
   $('#tb tr:even').css("backgroundColor","#888");
   //获取id为tb的元素,然后寻找他下面的tbody标签，再寻找tbody下索引值是偶数的tr元素,
   //改变它的背景色.
})
</script>
</head>
<body>
<table id="tb">

<tr><td>第一行</td><td>第一行</td></tr>
<tr><td>第二行</td><td>第二行</td></tr>
<tr><td>第三行</td><td>第三行</td></tr>
<tr><td>第四行</td><td>第四行</td></tr>
<tr><td>第五行</td><td>第五行</td></tr>
<tr><td>第六行</td><td>第六行</td></tr>
<tr><td>第7行</td><td>第7行</td></tr>
<tr><td>第8行</td><td>第8行</td></tr>

</table>
</body>
</html>

#4

引用 2 楼  的回复:
<c:forEach items="${mmXX}" var="mX" varStatus="status"> 
  <tr class="row$(status.count%2)">  
    <td>。。。。。</td>
    ... 
  </tr> 
</c:forEach>




应该用status.index而非status.count

#5

引用 4 楼  的回复:
引用 2 楼  的回复:

<c:forEach items="${mmXX}" var="mX" varStatus="status">
<tr class="row$(status.count%2)">
<td>。。。。。</td>
...
</tr>
</c:forEach>




应该用status.index而非status.count


好像status.count也行！
标签：

相关文章