ajax,删除表格一行

ajax,删除格一行 篇一:ajax动态生成表格与下拉框 一、ajax动态生成表格的方法 1、后台信息 (1) String start = <rooms; String end = </rooms; String xml = ; for (int i = 0; i <list.size(); i++) { xml+=<room<roomId +list.get(i).getRoomId()+</roomId<dorName+list.get(i).getDorName()+</dorName<roomNo +list.get(i).getRoomNo()+</roomNo<freeBeds+list.get(i).getFreeBeds()+</freeBeds<beds +list.get(i).getBeds()+</beds<sex+list.get(i).getSex()+</sex</room; } xml = start + xml + end; 1 response.setCharacterEncoding(utf-8); response.setContentType(text/xml);//把输出的格式设置为 输出一个xml PrintWriter out = response.getWriter();//输出字符串。在 输出的过程中会处理成xml out.write(xml); out.close(); return null; (2)在后台得到list数据后，拼成字符串然后传给JS 2、js代码 if (XMLHttpReq.readyState == 4) { if (XMLHttpReq.status == 200) { var xmlDoc = XMLHttpReq.responseXML.documentElement; if (xmlDoc == undefined || xmlDoc == null) { return; } var rooms = xmlDoc.getElementsByTagName(room); var table = document.getElementById(table1);//获得JSP 页的表格对象 for (var i = table.rows.length - 1; i 0; i--) {// 保留表的标 table.deleteRow(i); } 2 for (var j = 0; j < rooms.length; j++) { var roomId = rooms[j].childNodes[0].firstChild.nodeValue; var dorName = rooms[j].childNodes[1].firstChild.nodeValue; var roomNo = rooms[j].childNodes[2].firstChild.nodeValue; var freeBeds = rooms[j].childNodes[3].firstChild.nodeValue; var beds = rooms[j].childNodes[4].firstChild.nodeValue; var sex = rooms[j].childNodes[5].firstChild.nodeValue; var newRow = table.insertRow(); var newCellroomId = newRow.insertCell(); var newCelldorName = newRow.insertCell(); var newCellroomNo = newRow.insertCell(); var newCellfreeBeds = newRow.insertCell(); var newCellbeds = newRow.insertCell(); var newCellsex = newRow.insertCell(); newCellroomId.innerHTML = <input type='radio' id= + roomId + name='danxuan1'/; newCelldorName.innerHTML = dorName; newCellroomNo.innerHTML = roomNo; 3 newCellfreeBeds.innerHTML = freeBeds; newCellbeds.innerHTML = beds; newCellsex.innerHTML = sex; } } else { window.alert(未相应完毕); } } (2) var xhr = getXHR(); xhr.open(post, <%=path%/assign.do?method=doQueryRoom&condition=+condition+&value=+encodeURI(encodeURI(va lue)), true); xhr.oeadystatechange=function(){ if (xhr.readyState==4 && xhr.status==200){//服 务器相应完毕 var str=xhr.responseText.split(:); var arr=new Array(); var tab1=document.getElementById(table1);//获得table 的id var tbody=document.createElement(tbody);//创建 tbody //删除原先的表格行 for(var i=tab1.rows.length-1;i0;i--){ 4 tab1.deleteRow(i); } //遍历每行，创建行以及单元格 for(var i=0;i<str.length-1;i++){ arr=str[i].split(,); var tr=document.createElement(TR);//创建tr tr.setAttribute (className,Tr_message); var td1=document.createElement(TD);//创建td var st1=<input type='checkbox' name='leftCheck' value=+arr[6]+<input type='hidden' name='distributed' value=+arr[7]+; td1.innerHTML=st1; td1.setAttribute(className,Td_message); tr.appendChild(td1); tbody.appendChild(tr);//将tr放在tbody里 } tab1.appendChild(tbody);//将tbody放在table里 二、ajax动态生成下拉框 1、 前台: 5 if (XMLHttpReq.readyState == 4) { if (XMLHttpReq.status == 200) { var xmlDoc = XMLHttpReq.responseXML.documentElement; if(xmlDoc == undefined || xmlDoc == null) return; var majors = xmlDoc.getElementsByTagName('major'); var combFaculty = document.getElementById('major'); combFaculty.options.length = 0;// 把该下拉列表框的选项 清空 for ( var i = 0; i < majors.length; i++)// 遍历存有major 节点的数组 { var xValue = majors[i].childNodes[0].firstChild.nodeValue; var xText = majors[i].childNodes[1].firstChild.nodeValue; var option = new Option(xText, xValue);// 创建一个新的 下拉列表框选项 try { combFaculty.add(option);// 把新建的选项添加到下拉列 表框中 } catch (e) { } 6 } } else { // 页面不正常 window.alert(系统返回值出错，请联系系统维护人员～); } } 后台: public ActionForward getMajor(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response){ BmgStudentActionForm af = (BmgStudentActionForm)form; String start = <majors; String end = </majors; String xml = ; List<MajorInfoBean majorList = null; 篇二:使用ajax和dom生成table (转)使用JavaScript和DOM动态创建表格 第一次翻译技术文章，本身英语水平很烂，翻译的也是自己刚开始学习的技术，所以能勉强看懂英文的话都要尽量读 原文 而不要看我的翻译，免得被误导。阅读原文 简介 这篇文章简单介绍了DOM 1.0一些基本而强大的方法以 7 及如何在 JavaScript中使用它们。你可以学到如何动态地创建、获取、控制和删除HTML元素。这些DOM方法同样适用于XML。所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例，比如IE5，Firefox等。 概况 , Sample1.html 这篇文章通过实例代码介绍DOM。请从尝试下面的HTML例子开始。它使用DOM 1的方法由JavaScript动态创建一个HTML表格。它创建一个由四个包含文本内容的单元格组成的小表格。单元格的文字内容是:“单元格是第y行第x列”，表示单元格在表格中的行数和列数。 <html <head <title实例代码 - 使用JavaScript和DOM创建HTML表格</title <script function start() { //获取body标签 var mybody = document.getElementsByTagName(body)[0]; // 创建一个<table元素和一个<tbody元素 mytable = document.createElement(table); mytablebody = document.createElement(tbody); 8 //创建所有的单元格 for(var j = 0; j < 2; j++) { // 创建一个<tr元素 mycurrent_row = document.createElement(tr); for(var i = 0; i < 2; i++) { // 创建一个<td元素 mycurrent_cell = document.createElement(td); //创建一个文本节点 currenttext = document.createTextNode(单元格是第+j+ 行，第+i+列); // 将创建的文本节点添加到<td里 mycurrent_cell.appendChild(currenttext); // 将列<td添加到行<tr mycurrent_row.appendChild(mycurrent_cell); } // 将行<tr添加到<tbody mytablebody.appendChild(mycurrent_row); } // 将<tbody添加到<table mytable.appendChild(mytablebody); //将<table添加到<body mybody.appendChild(mytable); 9 // 将表格mytable的border属性设置为2 mytable.setAttribute(border, 2); } </script </head <body onload=start() </body </html 注意我们创建各元素和文字节点的顺序: 1.创建< table 元素 2.创建< table 的子元素< tbody 3.使用一个循环来创建< tbody 的子元素< tr 4.分别使用循环为每一个< tr 创建子元素< tb 5.为每一个< tb 创建文本节点 创建完< table ,< tbody ,< tr ,< td 元素和文本节点，我们使用相反的顺序把它们分别添加到自己的父节点。 1.将创建的文本节点添加到< td 里 mycurrent_cell.appendChild(currenttext); 2.将列< td 添加到行< tr mycurrent_row.appendChild(mycurrent_cell); 3.将行< tr 添加到< tbody 10 mytablebody.appendChild(mycurrent_row); 4.将< tbody 添加到< table mytable.appendChild(mytablebody); 5.将< table 添加到< body mybody.appendChild(mytable); 记住这个方法。当你使用W3C DOM时会经常用到它。首先，你从上向下建立元素;然后从下向上把它们添加到父节点。 这是JavaScript代码生成的HTML: ... <table border=5 <tr<td单元格是第0行， 第0列</td<td单元格是第0行，第1列</td</tr <tr<td单元格是第1行，第0列</td<td单元格是第1行，第1列</td</tr </table ... 这是代码生成的表格元素和它的子元素的DOM对象树: 你只需使用少量的DOM方法就可以构造这样一个表格和他的子元素。记住要时刻谨记你将创建的构造的模型树;这样会使编写代码更加简单。在图中的< table 树里，< table 有一个子元素< tbody 。< tbody 有两个子元素。< tbody 的每个子元素(< tr )都有两个子元素< 11 td 。最后，每个< td 有一个子元素:一个文本节点。 基本的DOM方法 , Sample2.html getElementByTagName方法适用于文档和元素，所以文档根对象和所有的元素对象一样有 getElementByTagName 方法。你可以使用 element.getElementsByTagName(tagname) 来获取某个元素所有子元素的列表，使用标签名选择它们。 element.getElementsByTagName 返回一个有特定标签名的子元素的列表。你可以通过调用一个item方法(传递一个index参数给它)来从这个子元素列表中获取一个元素。请注意列表第一个子元素的index为0。下一个主题继续前面的Table例子。下面这个实例更加简单，显示了一些基本的方法: <html <head <title实例代码 - 使用JavaScript和DOM创建HTML表格</title<script function start() { // 获取一个包含所有body元素的列表(将只有一个) // 然后选择列表里的第一个元素 myBody = document.getElementsByTagName(body)[0]; // 获取body字元素中所有的p元素 myBodyElements = myBody.getElementsByTagName(p); 12 //获取p元素列表的第二个元素(索引从0开始) myP = myBodyElements[1]; } </script </head <body onload=start() <phi</p <phello</p </body </html 在这个例子里，我们设置myP变量为表示body里第二个p元素的DOM对象。 1.获取一个包含所有body元素的列表 myBody = document.getElementsByTagName(body)[0]; 因为一个有效的html文档只有一个body元素，这个列表讲只有一项。我们通过使用 [0] 选取列表的第一个元素来得到它。 2.获取blog子元素里所有的p元素 myBodyElements = myBody.getElementsByTagName(p); 3.选取p元素列表的第二项 myP = myBodyElements[1]; 一旦获得一个html元素的DOM对象，你就可以设置它 13 的属性。比如，你想设置style background color属性，只需要添加: myP.style.background = rgb(255,0,0); 使用document.createTextNode(”..”)创建文本节点 使用文档对象调用createTextNode方法建立你的文本节点。你只需要输入文本内容。返回值是一个表示这个文本节点的对象。 myTextNode = document.createTextNode(world); 以上代码创建一个文本数据是“word”的TEXT_NODE类型(文字块)节点，变量myTextNode指向这个节点对象。你需要设置这个文本节点为其他节点元素的字节点来插入这个文本到你的html页面里。 使用appendChild(..)插入元素 所以，通过调用myP.appendChild([node_element])，你设置这个文本节点为第二个p元素的字节点。 myP.appendChild(myTextNode); 测试这个例子，注意“hello”和“world”两个词是连在一起的: “helloworld”。所以在当你看到html页面时两个文本节点hello和world看起来好像是一个节点，而实际上在这个文档模型里有两个节点。第二个节点是一个新的TEXT_NODE类型节点，并且是第二个p标签的第二个字节点。下图在文 14 档 树里显示了刚创建的文本节点。 createTextNode和appendChild是在hello和world之间添加空格的一种简单的方法。需要特别注意的是 appendChild方法将添加在最后一个子节点后面，就像world被添加到hello后面。所以如果你想在hello和world之间添加一个文本节点需要使用insertBefore方法而不是appendChild。 使用文档对象和createElement(..)方法创建新元素 你可以使用createElement方法创建新的HTML元素或者其他任何你想要的其他元素。例如，如果你想为< body 元素添加一个字节点< p 元素，可以使用前例中的myBody添加一个新的元素节点。创建一个节点只需要调用document.createElement(”tagname”)。例如: myNewPTAGnode = document.createElement(p); myBody.appendChild(myNewPTAGnode); 使用removeChild(..)方法删除节点 每个节点都可以删除。下面这行代码删除myP(第二个< p 元素)里包含单词world的文本节点。 myP.removeChild(myTextNode); 最后你可以把包含单词world的文本节点myTextNode添加到新创建的< p 元素里: 15 myNewPTAGnode.appendChild(myTextNode); 修正的对象树最后像这样: 动态创建一个表格(回到Sample1.html) 文章的剩余部分将回到Sample1.html。下图显示了例子中创建的表格的对象树结构。 回顾HTML表格结构 创建元素节点并把它们添加到文档树 创建sample1.html里的表格的基本步骤: 获取body对象(文档对象的第一项) ? 创建所有的元素 ? 篇三:复习大纲ajax 第一章:Web 2.0与Ajax 1、掌握Ajax 技术的原理 ?Ajax技术是JavaScript DOM XML等技术的综合体，通过XMLHttpRequest和服务端交互。Js dom css XMLHttpRequest ?Ajax原理简单来说就是通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面(数据格式) 2、会编写Ajax 服务器端程序 ?服务器端处理程序:aspx,ashx。为客户端程序提供调用的基础。 3、会使用JavaScript 编写Ajax 客户端程序?使用XMLHttpRequest的步骤: (1) 创建XMLHttpRequest 16 对象 (2) 设置回调函数。 (3) 初始化XMLHttpRequest对象 open() (4) 向服务器发送请求send() (5) 接收返回数据，根据返回数据进行处理。 ?使用XMLHttpRequest的oeadystatechange属性设置回调函数。?XMLHttpRequest的状态属性:readyState:0 1 2 3 4 status: 200 ?使用POST提交数据: (1) 服务端用Request.Form获取提交数据 (2)客户端使用send(参数)方法发送数据，该参数的数据会作为请求体的一 部分传送到目标URL。 (3)设置请求头部信息方法:setRequestHeader(),以便于使用 Request.Form[]获取到提交的数据。 XMLHttpRequest.setRequestHeader(“Content-Type”,” application/x-www-form-urlencoded”); ?解决get方法IE缓存方法:法一:服务端: Response.Cache.SetNoStore(); 法二:客户端: 设置http请求头的IMS标签: 17 XMLHttpRequest.SetRequestHeader(“if-Modified-Since”,”0”); 或: XMLHttpRequest.SetRequestHeader(“Cache-Control”,” no-cache”); 第二章:异步处理数据: 1、掌握客户端XMLDocument 对象的使用 ?将实体对象序列化为XmlWriter对象:XmlSerializer和XmlTextWriter结合使用。 ?创建XmlDocument对象:new ActiveXObject(“Microsoft.XMLDOM”); (1)使用XmlDocument对象加载XML数据:Load(“xml文件名”);loadXML(“xml字符串”); (2)async属性 (3)readyState属性 0 1 2 3 4(4)oeadystatechange事件 ?XmlDocument操作节点 (1)从XmlDocument中获取节点对象 getElementsByTagName()方法: SelectSingleNode()方法 SelectNodes()方法 (2)访问节点信息: getAttribute() 方法 text属性 childNodes属性 firstChild属性 lastChild属性 parentNode属性 ?通过XMLHttpRequest对象的responseXML属性得到XMLDocument对象。 会编写使用XML 格式传输数据的 18 Ajax程序 2、掌握JSON 的基本用法 ?JSON数据格式: (1)采用“名称/值”对的集合来表示数据 (2)以{开始，以}结束 (3)每个“名称”和“值”之间用 :分隔。 (4)各“名称/值”对之间用“，”分隔。 (5)json数据可以直接表示为数组(集合)形式:如果“值”是集合或数组，则以[开始，以]结束，集合中的值用 ，分隔。 (6)json值可以是:数字(整数或浮点数) 字符串(双引号) 逻辑值(true或false) 数组(方括号)对象(花括号) null ?.net服务器端将C#对象序列化为JSON对象 (1)using System.Web.Script.Serialization (2)JavaScriptSerializer类的Serialize()方法来执行序列化 会编写使用JSON 格式传输数据的Ajax程序 第四章、初识jQuery 1、使用jQuery 框架进行AJAX开发 (1)load()方法:$().load(URL,[可选参数],回调函数) (2)get()方法:$.get(URL,[可选参数]，回调函数) (3)post()方法:$.post(URL,[可选参数]，回调函数) (4)ajax()函数:参数设置: 1、使用jQuery 框架简单操作HTML DOM 元 19 素 ?jQuery的核心函数$()---jQuery对象的制造工厂。 (1)$(express,[context]) (2)$(html) (3)$(elements) (4)$(fn)等效于$(document).ready(function())?jQuery对象和DOM对象的相互转换: (1)jQuery对象不能使用DOM对象方法;DOM对象也不能使用jQuery对象方法。 (2)jQuery对象转DOM对象【注:jQuery对象是一个数组对象】 通过 【1】[index] 【2】get(index) (3)DOM对象转换成jQuery对象: $()包装DOM对象 3、使用jQuery框架查找HTML DOM元素 (选择器)(1)基本选择器: ?#id 元素id，例如$('#div_title') ?element 元素标记名，例如$('div') ? .class 元素类名，例如$('.title')class= ‘title’ ?* 所有元素，例如$('*') ?elector1, selector2, selectorN 多个子选择器获得多个元素 (2)层次选择器: ?在给定的祖先元素下寻找所有的后代元素(包括子元素、孙子元素) ancestor descendant ?在给定父元素下，匹配所有子元素 parent child ?匹配所有紧接在prev元素后的next元素 20 prev + next 匹配prev的仅第一个平级兄弟元素 ?匹配 prev元素之后的所有siblings元素 prev ~ siblings匹配prev的所有平级兄弟元素 (3)过滤选择器: 基本筛 选 :first :last :not(:checked) :even :odd :header<h 按元素的内容筛选 :contains('?'):has(input) 按可见性筛选 :hidden :visible 按属性筛选 [id] [name='a'] [name!='a'] [name–'a'] [name$='a'][id][name*='a'] 按子元素 筛选 :nth-child(n):first-child :last-child :only-child 21