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