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()+"</dorN ame><roomNo>"+list.get(i).getRoomNo()+"</roomNo><freeBeds>"+list.get(i).getFreeBeds()+"</free Beds><beds>"+list.get(i).getBeds()+"</beds><sex>"+list.get(i).getSex()+"</sex></room>";}xml = start + xml + end;response.setCharacterEncoding("utf-8");response.setContentType("text/xml");//把输出的格式设置为输出一个xml PrintWriter out = response.getWriter();//输出字符串。

在输出的过程中会处理成xml out.write(xml);out.close();return null;(2)在后台得到list数据后，拼成字符串然后传给JS2、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);}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;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="+condi tion+"&value="+encodeURI(encodeURI(value)), true);xhr.onreadystatechange=function(){if (xhr.readyState==4 && xhr.status==200){//服务器相应完毕var str=xhr.responseText.split(":");var arr=new Array();var tab1=document.getElementById("table1");//获得table的idvar tbody=document.createElement("tbody");//创建tbody//删除原先的表格行for(var i=tab1.rows.length-1;i>0;i--){tab1.deleteRow(i);}//遍历每行，创建行以及单元格for(var i=0;i<str.length-1;i++){arr=str[i].split(",");var tr=document.createElement("TR");//创建trtr.setAttribute ("className","Tr_message");var td1=document.createElement("TD");//创建tdvar 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、前台：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) {}}} 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;int majorListSize = 0;PrintWriter out;if(bmgStudentService == null)return mapping.findForward("error404");try{majorList =bmgStudentService.getMajorListByFaculty(af.getFacultyId()); majorListSize = majorList.size();for(int i = 0; i < majorListSize; i++){MajorInfoBean mib = (MajorInfoBean)majorList.get(i);xml += "<major><id>" + mib.getMajorId() + "</id><name>" +mib.getMajorName() + "</name></major>";}xml = start + xml + end;response.setCharacterEncoding("utf-8");response.setContentType("text/xml");//把输出的格式设置为输出一个xml out = response.getWriter();//输出字符串。