Table中筛选数据

最新推荐文章于 2023-08-22 09:58:50 发布

别有滋味

最新推荐文章于 2023-08-22 09:58:50 发布

阅读量1.7k

点赞数

分类专栏： Jquery 文章标签： table dataset function server border sql

Jquery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

前台页面：

<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];

        }