读《掌握 Ajax》之基于Table的无刷新删除操作

平台:VS.Net2005或VS.Net2003
准备工作:
新建DataShow.aspx和DataProcess.aspx页面
创建access数据库,名为:ajaxDB.mdb,放在文件夹App_Data下
在数据库中创建表T_user【u_id(主键),u_name,u_sex,u_address】
DataShow用于数据呈现;
DataProcess用于处理各种与数据库的交互操作,并返回数据集或操作结果;
删除操作
1.读取数据库数据并显示到DataShow.aspx页面;
注意:
      其中的Show变量必须是public类型的,以确保前台页面能取到它的值!
     为table表的每行设定行号(tr1,tr2......在删除操作中没有用到行号,留以后备用)
DataShow后台代码如下:

DataShow后台代码


DataShow前台HTML代码如下:

DataShow前台HTML代码


2.点击删除触发del(obj)函数,弹出删除提示;
3.选择确定删除后,触发confimdel(obj)函数;
4.通过“删除”这个连接对象得到其所在的行对象tr;
    var tr=obj.parentElement.parentElement
5.通过行对象取到其第一个td内的用户编号;
  tr.cells[0].innerText
6.将用户编号传到DataProcess.aspx 页面;
 DataProcess后台代码如下:

DataProcess后台代码


DataProcess前台HTML代码如下:

DataProcess前台HTML代码


7.DataProcess后台通过FunDel()方法对数据库进行操作,并将操作结果存储在全局变量Result中;
8.DataShow页面的xmlhttp.getPage(url)方法获取到DataProcess的操作结果,即Result的值;
9.根据Result返回值的不同对当前页面元素进行操作,即javascript操作html元素;
10.删除table表的一行用以下代码:
     tr.parentElement.parentElement.deleteRow(tr.rowIndex),其中tr表示行对象,如果该行的id为tr1则tr=document.all("tr1")
注意:xmlhttp.getPage(url)方法会取到DataProcess.aspx页面上所有你通过查看源文件看到的东西。
所以<%=Result%>和
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataProcess.aspx.cs" Inherits="DataProcess" %> 在同一行,
否则要处理换行

你可能感兴趣的:(table)