- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- < html >
- < head >
- < title > 动态增删表格行 </ title >
- < script language = "JavaScript" >
- var request = false ;
- var rowIndex = 0 ;
- var Strs = "" ;
- var Values = "" ;
- function getCustomerInfo() {
- var url = "/Ajax/scripts/lookupCustomer.jsp?" ;
- request.open("GET", url, true);
- request.onreadystatechange = updatePage ;
- request.send(null);
- }
- function updatePage() {
- if ( request.readyState == 4)
- {if ( request.status == 200)
- {
- var res1 = request .responseXML.getElementsByTagName("res")
- var subMenu1 = "----请选择题型----" ;
- for(var i = 0 ; i < res1.length ; i++) {
- subMenu1 subMenu1 = subMenu1+ "," + res1[i].firstChild.data + "";
- }
- Strs = subMenu1 .split(",");
- var res2 = request .responseXML.getElementsByTagName("val")
- var subMenu2 = "-1" ;
- for(var j = 0 ; j < res2.length ; j++) {
- subMenu2 subMenu2 = subMenu2+ " , " + res2[j].firstChild.data + "";
- }
- Values = subMenu2 .split(",");
- }
- else if ( request.status == 404)
- { alert("Request URL does not exist");}
- else if ( request.status == 403) {
- alert("Access denied.");
- }
- else
- alert("Error: status code is " + request.status);
- }
- }
- function AddOption(Values,Strs)
- {
- var i;
- var MyOption = "" ;
- for ( i = 0 ;i < Values.length ;i++)
- {
- MyOption MyOption =MyOption+" < option value = "+Values[i]+" > "+Strs[i]+" </ option > ";
- }
- return MyOption;
- }
- function createXMLHttpRequest() {
- try {
- request = new XMLHttpRequest();
- } catch (trymicrosoft) {
- try {
- request = new ActiveXObject("Msxml2.XMLHTTP");
- } catch (othermicrosoft) {
- try {
- request = new ActiveXObject("Microsoft.XMLHTTP");
- } catch (failed) {
- request = false ;
- }
- }
- }
- if (!request)
- alert("Error initializing XMLHttpRequest!");
- }
- function addLine(obj){
- var obj objSourceRow =obj.parentNode.parentNode;
- var obj objTable =obj.parentNode.parentNode.parentNode.parentNode;
- if( obj.value =='增加'){
- createXMLHttpRequest();
- getCustomerInfo();
- rowIndex++;
- var objRow = objTable .insertRow(rowIndex);
- var objCell;
- objCell = objRow .insertCell(0);
- objCell.innerHTML = "<input name='row" +rowIndex+"' value = '第"+rowIndex+"题' > "//在表格单元中添加文本输入框
- objCell = objRow .insertCell(1);
- objCell.innerHTML = "<select name=PRO" +rowIndex+" > "+AddOption(Values,Strs)+" </ select > ";
- objCell = objRow .insertCell(2);
- objCell.innerHTML = "<input name='row" +rowIndex+"' value = '' > "
- objCell = objRow .insertCell(3);
- objCell.innerHTML = "<input name='row" +rowIndex+"' value = '' > ";
- objCell = objRow .insertCell(4);
- objCell.innerHTML = objSourceRow .cells[4].innerHTML.replace(/增加/,'删除');
- }
- else{
- objTable.lastChild.removeChild(objSourceRow);
- rowIndex--;
- }
- }
- </ script >
- </ head >
- < body bgcolor = "#ffffff" onLoad = "createXMLHttpRequest();getCustomerInfo();" >
- < table align = "center" >
- < tr align = "center" >
- < td width = "100" >
- 大题号
- </ td >
- < td width = "100" >
- 题型
- </ td >
- < td width = "100" >
- 小题量
- </ td >
- < td width = "100" >
- 分值
- </ td >
- < td width = "100" >
- </ td >
- </ tr >
- </ table >
- < form name = "form1" method = "post" >
- < table border = "0" align = "center" >
- < tr >
- < td width = "100" >
- </ td >
- < td width = "100" >
- </ td >
- < td width = "100" >
- </ td >
- < td width = "100" >
- </ td >
- < td width = "100" >
- < input name = "add" type = "button" id = "add" value = "增加" onclick = "addLine(this)" />
- </ td >
- </ tr >
- < tr >
- < td >
- </ td >
- < td >
- </ td >
- < td >
- </ td >
- </ tr >
- < tr >
- < td >
- </ td >
- < td >
- </ td >
- < td >
- </ td >
- </ tr >
- </ table >
- </ form >
- </ body >
- </ html >
JSP 页面代码:
- < %@ page contentType = "text/html; charset=GBK" % >
- < %
- String contents1 = "单选题" ;
- String contents2 = "多选题" ;
- String value1 = "1" ;
- String value2 = "2" ;
- //传回响应数据
- response.setContentType("text/xml; charset = UTF -8");
- response.setHeader("Cache-Control", "no-cache");
- out.println(" < response > ");
- out.println(" < res > " + contents1 + " </ res > ");
- out.println(" < res > " + contents2 + " </ res > ");
- out.println(" < val > " + value1 + " </ val > ");
- out.println(" < val > " + value2 + " </ val > ");
- out.println(" </ response > ");
- out.close();
- % >
关天数据库连接用javabean就好,和写JSP页面一样。