前台页面:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
table
{
border: 0;
border-collapse: collapse;
}
div
{
font: normal 12px/17px Arial;
}
td
{
font: normal 12px/17px Arial;
padding: 2px;
width: 100px;
}
th
{
font: bold 12px/17px Arial;
text-align: left;
padding: 4px;
border-bottom: 1px solid #333;
width: 100px;
}
.even
{
background: #FFF38F;
}
/* 偶数行样式*/.odd
{
background: #FFFFEE;
}
/* 奇数行样式*/.selected
{
background: #FF6500;
color: #fff;
}
</style>
<script src="JS/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
$("tbody>tr").click(function() {
var tid = $(this).attr("id");
alert(tid);
});
//文本框添加keyup事件
$("#filterName").keyup(function() {
//隐藏所有的tr
$("table tbody tr")
.hide()
//过滤掉和输入内容不匹配的tr
.filter(":contains('" + ($(this).val()) + "')")
.show();
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
筛选:
<input id="filterName" type="text" />
<br />
<table id="tab1">
<thead>
<tr>
<th>
姓名
</th>
<th>
性别
</th>
<th>
暂住地
</th>
</tr>
</thead>
<tbody style="cursor: pointer">
<%for (int i = 0; i < GetAll().Rows.Count; i++)
{%>
<tr id='<%=GetAll().Rows[i]["uid"] %>'>
<td>
<%=GetAll().Rows[i]["uname"] %>
</td>
<td>
<%=GetAll().Rows[i]["sex"] %>
</td>
<td>
<%=GetAll().Rows[i]["address"] %>
</td>
</tr>
<%} %>
</tbody>
</table>
</div>
</form>
</body>
</html>
后台代码:
public DataTable GetAll()
{
SqlConnection conn = new SqlConnection("server=.;database=Example;uid=sa;pwd=***");
string sql = "select *from userinfo";
SqlDataAdapter da = new SqlDataAdapter(sql, conn);
DataSet ds = new DataSet();
da.Fill(ds);
return ds.Tables[0];
}