用jquery技术实现table的奇数行变色
完整代码：
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<style type="text/css">
.red2 {
background: #eeeeee;
}
</style>
<script type="text/javascript">
$(function(){
//查询按钮
//奇数航变色
$("#table1 tr:even").addClass("red2");
});
</script>
<table id="table1" class="table table-bordered" >
<tr>
<th>员工ID</th>
<th class="width100">工号</th>
<th>姓名</th>
<th>性别</th>
<th>出生日期</th>
<th>专业</th>
<th>学历</th>
<td>操作</td>
</tr>
<tr >
<td>得到</td>
<td> 但是</td>
<td>23</td>
<td>得到</td>
<td>但是</td>
<td>12</td>
<td>23</td>
<td>33</td>
</tr>
<tr >
<td>得到</td>
<td> 但是</td>
<td>23</td>
<td>得到</td>
<td>但是</td>
<td>12</td>
<td>23</td>
<td>33</td>
</tr>
<tr >
<td>得到</td>
<td> 但是</td>
<td>23</td>
<td>得到</td>
<td>但是</td>
<td>12</td>
<td>23</td>
<td>33</td>
</tr>
</table>
第一步要引入jque.js包
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
第二步写table
<table id="table1" class="table table-bordered" >
<tr>
<th>员工ID</th>
<th class="width100">工号</th>
<th>姓名</th>
<th>性别</th>
<th>出生日期</th>
<th>专业</th>
<th>学历</th>
<td>操作</td>
</tr>
<tr >
<td>得到</td>
<td> 但是</td>
<td>23</td>
<td>得到</td>
<td>但是</td>
<td>12</td>
<td>23</td>
<td>33</td>
</tr>
<tr >
<td>得到</td>
<td> 但是</td>
<td>23</td>
<td>得到</td>
<td>但是</td>
<td>12</td>
<td>23</td>
<td>33</td>
</tr>
<tr >
<td>得到</td>
<td> 但是</td>
<td>23</td>
<td>得到</td>
<td>但是</td>
<td>12</td>
<td>23</td>
<td>33</td>
</tr>
</table>
</div>
第三步;实现事件；
<script type="text/javascript">
$(function(){
//查询按钮
//奇数航变色
$("#table1 tr:even").addClass("red2");
});
</script>
第四步：添加css:
<style type="text/css">
.red2 {
background: #eeeeee;
}
</style>
更多相关文章
- ASP.NET下使用jQuery UI下的Dialog，服务器端按钮无响应的问题。
- 用jquery 绑定一个按钮click事件后，第一次点击后，一切正常，第二次点
- JQuery 表单验证按钮提交之前变色
- 使用jquery实现点击按钮弹出层和点击空白处隐藏层
- jquerymobile phonegap back按钮获取先前状态
- 9.1.4 前端 - HTML body标签 - 标题,段落,分割线,换行，特殊符号，列
- Jquery中的事件处理(自动触发事件,禁用按钮,悬停，失焦，滑动效果)
- 你能告诉为什么javascript函数没有在profile.php的提交按钮中执
- html5中点击按钮，改变按钮状态效果样式