jquery学习(二)
巩固下一些jquery学到的知识:
1. addClass()
2. hover()
3. contains的使用
4. parent()
－－－－－－－－－－－
链接数据库，在这里，我不使用gridview等服务器数据控件，直接在页面上循环得到显示的数据.
使用的是sql 2000的pubs数据库authors表:
下面，我们为这个表格添加上斑马线和悬停效果：
<head runat="server"> <title>Jquery学习</title> <script language="javascript" src="js/jquery-1.2.3.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(document).ready(
//设置CSS $('th').addClass('head'); $('tr:odd').addClass('one'); $('tr:even').addClass('other'); $('td:contains("False")').parent().addClass('highlight'); //显示鼠标悬停效果 $('tr').hover(function(){ $(this).addClass('over');
}, function(){ $(this).removeClass('over'); } ); });
</script> <style type="text/css"> table{border:#00F 2px solid;border-collapse:collapse;text-align:center;margin:10px;} .head{background-color:Lime;} .one{background-color:#ffc;} .other{background-color:#cef;} .highlight{background-color:Red;} .over{background-color:Silver;} </style></head><body> <form id="frmMain" runat="server"> <div> <% int rCount=ds.Tables[0].Rows.Count; int cCount=ds.Tables[0].Columns.Count; Response.Write("<table>"); Response.Write("<tr>"); for (int ii = 0; ii < cCount; ii++) { Response.Write("<th>"+ds.Tables[0].Columns[ii].Caption+"</th>"); } Response.Write("</tr>"); for (int i = 0; i < rCount; i++) { Response.Write("<tr>"); for (int j = 0; j < cCount; j++) { Response.Write("<td>" + ds.Tables[0].Rows[i][j].ToString() + "</td>"); } Response.Write("</tr>"); } Response.Write("</table>"); %> </div> </form></body></html>效果图：
悬停：
PS:很简单地，汗颜～！