[英]Alternate table row color change
我已經創建了如下表格,我想改變行的顏色。 我已經在頭部添加了jquery腳本,但是它不起作用。 我不知道怎么了 請有人解決這個問題。
提前致謝。
Home.html中
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery.dataTables.css" type="text/css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#example').dataTable();
} );
</script>
<script type="text/javascript">
$(function(){
$("table.dataTable tbody tr :even").addClass("d0");
$("table.dataTable tbody tr :odd").addClass("d1");
});
</script>
</head>
<body>
<table id="example" class="row-border" cellspacing="0" width="100%">
<thead>
<tr>
<th>Client</th>
<th>Financial Year</th>
<th>Short Description</th>
<th>Full Description</th>
<th>File Upload</th>
<th>Assign TO</th>
<th>Action</th>
</tr>
</thead>
<tbody>
**<tr class="d0">**
<td>C1</td>
<td>2014-15</td>
<td>Hi</td>
<td>Hello</td>
<td>Information.pdf</td>
<td>P232</td>
<td>Edit</td>
</tr>
**<tr class="d1">**
<td>C2</td>
<td>2015-16</td>
<td>Hi</td>
<td>Hello</td>
<td>Tech.xls</td>
<td>P17</td>
<td>Edit</td>
</tr>
</tbody>
</table>
</body>
</html>
style.css文件
table.dataTable tbody tr {
background-color: #FFC;
}
你可以用這種風格
tr:nth-child(even) {
color: white;
background: black;
}
您只能使用CSS來實現:
#example tr:nth-child(odd) { background-color: #FFC }
像這樣簡單地使用。 為什么需要使用jQuery?
table.dataTable tbody tr { background-color: #FFC }
table.dataTable tbody tr:nth-child(2n) { background-color:grey }
您可以在css文件中使用兩個不同的類:
table.dataTable tbody tr.d0 {
background-color: #FFC;
}
table.dataTable tbody tr.d1 {
background-color: #FFF;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.