大家好,我的例子是前端解決方案colur和標題列,這是一個非常簡單的示例給你,希望它是你想要的,通過使用javascript與css
PS:順便說一句,其實你可以添加CSS到你的gridview,它是更簡單的方法來處理你的問題與前端。檢查GridView group rows and change color,如果你想使用後端解決方案。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb3212">
<title></title>
<script type="text/javascript">
window.onload = function color(){
var table = document.getElementById("person");
var rows = table.getElementsByTagName("tr");
for(var i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].style.backgroundColor = "#EAF2D3";
}
else{
rows[i].style.backgroundColor = "White";
}
}
}
</script>
<style type="text/css">
#person {
border-style: 1px solid;
border-color: blue;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
margin: auto;
}
#person th {
border: 1px solid;
padding: 3px 7px 2px 7px;
background-color: #A7C942;
color: #ffffff;
text-align: center;
}
#person td {
border-style: solid;
border-width: 1px;
text-align: center;
}
</style>
</head>
<body>
<table id="person" align="center" width="90%" height="200">
<tr>
<th>name</th>
<th>phone</th>
</tr>
<tr>
<td>aa</td>
<td>33333333</td>
</tr>
<tr>
<td>bb</td>
<td>44444444</td>
</tr>
<tr>
<td>cc</td>
<td>55555555</td>
</tr>
<tr>
<td>dd</td>
<td>66666666</td>
</tr>
</table>
</body>
</html>
Only CSS
<table class="myTable">
<tbody>
<tr><td>aa</td><td>aa</td></tr>
<tr><td>bb</td><td>bb</td></tr>
<tr><td>cc</td><td>cc</td></tr>
<tr><td>dd</td><td>dd</td></tr>
<tr><td>ee</td><td>ee</td></tr>
</tbody>
</table>
<style>
.myTable {
border: 1px solid black;
}
.myTable tr:nth-child(even) {
background: #CCC;
}
.myTable tr:nth-child(odd) {
background: #FFF;
}
</style>
JavaScript可以幫助你做到這一點 –
你能告訴我該怎麼做..任何想法? –
順便說一句css也可以做同樣的問題 –