实例详解jQuery结合显示数据表格（一种控件)控件的使用方法

jQuery是一种非常强大的客户端射流研究…编程技术，这里不想过多阐述它的相关背景知识，只想简单演示一下如何与ASP。网的控件结合开发。比如，我们要做一个下面如图所示的功能，效果是状态、编号、数字1、数字2、平均值所有的项都是通过后台绑定，如何点击检验盒按钮，来实现自动计算当前行两个数字的平均值呢？前提是用jQuery来实现？

我们直接在页面的页面加载事件中输入如下代码：

受保护的无效页面_加载(对象发送方，事件参数e) { if(！页面. IsPostBack){ DataTable dt=new DataTable()；dt .列。AddRange(新数据列[]{新数据列(' id '、类型of(Int32))、新数据列(' num1 '、类型of(Int32))、新数据列(' num2 '、类型of(int 32))})；DataRow dr=nulldr=dt .NewRow()；dr[' id ']=1；dr [' num 1 ']=20；dr[' num 2 ']=40；dt .行。添加(dr)；dr=dt .NewRow()；dr[' id ']=2；dr[' num 1 ']=40；dr[' num 2 ']=30；dt .行。添加(dr)；这个. GridView1。数据源=dt .默认视图这个GridView 1 .DataBind()；} } 前台页面身体部分：

正文表单ID=' form 1 ' runat=' server ' div ASP 3360 GridView ID=' GridView 1 ' runat=' server ' autogenerateColumns=' false ' Columns ASP : template field header text='状态项目模板asp:复选框ID=' check state ' runat=' server '/项目模板/asp:模板字段asp:模板字段标题文本='编号ItemTemplate asp:Label标签标签ID='lblId' runat='服务器' % # Eval(' ID ')%/ASP :标签/item template/ASP : template field ASP : template field标头文本='数字1 ' ItemTemplate asp:Label标签标签ID='lblNum1' runat='服务器% # Eval '(' num 1 ')%/AsP :标签/ItemTemplate/AsP : TemplateFieldAsP : TemplateFieldHeader text='数字2 ' ItemTemplate asp:Label标签标签ID='lblNum2' runat='服务器% # Eval(' num 2 ')%/ASP :标签/项目模板/ASP :模板字段ASP :模板字段标题文本='平均值项目模板asp3360文本框ID=' avg _ value ' runat=' server '/项目模板/asp: template field/Columns/asp: GridView/div/窗体/正文关键的在页面的头部分，输入如下代码就可以实现如图效果了。

脚本src=' http : js/jquery-1。4 .2 .js /脚本脚本类型=' text/JavaScript ' $(function(){ $(' # %=GridView 1 .客户端id“% 1”).查找(' tr td输入[type=checkbox]).每个（函数(){ $(此)).bind('click ')、function(){ if(this。选中){ var id=$(this).父项()。父项()。find('span[id*=lblId]').text()；var num1=$(this).父项()。父项()。find('span[id*=lblNum1]').text()；var num2=$(this).父项()。父项()。find('span[id*=lblNum2]').text()；var result=(parseFloat(num 1)parseFloat(num 2))/2；$(这个)。父项()。父项()。查找('输入[id*=avg_value]').val(结果);} else { $(this).父项()。父项()。查找('输入[id*=avg_value]').val(" ")；} });});});/script你会发现jQuery的代码读着很轻松，很容易理解。而且代码也很优美，最关键的是兼容性很好。再附一个简单点的例子，这是一个静态超文本标记语言页面，看jQuery是如何发挥威力的。效果是点击每一行的按钮时，弹出当前行的文本里面的价值。

超文本标记语言头脚本类型=' text/JAVAScript ' src=' http : jquery-1。4 .2 .js /脚本脚本类型=' text/JavaScript ' $(function(){ $(' table tr TD ')).每个（函数(){ $(此)).查找('[type=button]').单击(函数(){ alert($(this)).父项()。父项()。查找('[type=text]').val())；});});});/script/head body table tr td1/TD tdinput type=text value='数据1 '/TD/TD输入类型=按钮onclick=' GetTest()' value='获取//TD/tr/tr td2/TD tdinput type=text value='数据2 '/TD/TD输入类型=按钮onclick=' GetTest()' value='获取//td /tr /table /body /html试想，如果我们用射流研究…去做，将会很麻烦，而且还要考虑各种浏览器的兼容性。看到这里不得不感叹一句，jQuery虽然短小，但是相当强大啊。