动态增删输入框和下拉列表框源代码------下拉列表值从数据库取得（Ajax）
2008-08-25 13:18
429 查看
<!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就好，和写ＪＳＰ页面一样。
<
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就好，和写ＪＳＰ页面一样。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 多个下拉列表(select)不能取重复值判断-动态增加输入框－模仿CSDN结贴时分数判断-但无层提示-Ajax取值(全部源码)
- jquery的ajax动态下拉列表
- .NET中一般处理程序(ashx)在Ajax中的使用－－下拉列表的动态级连
- jQuery实现输入框下拉列表树插件特效代码分享
- Ajax动态为下拉列表添加数据
- Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
- Ajax调用后台action返回JSONArray（JSONObject）类型实现jsp中下拉列表的动态显示
- ajax实现动态从数据库模糊查询显示到下拉框中(ajax方法返回Dataset的例子）
- Ajax动态下拉列表
- select下拉列表， 从数据库查询，动态添加选项option
- Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
- Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
- Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
- Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
- ajax智能提示+textbox动态生成下拉框示例代码
- Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中(ZT)
- ajax+jquery+flea+smarty实现了通过选择下拉列表动态显示相应的数据
- ajax实现动态从数据库模糊查询显示到下拉框中(ajax方法返回Dataset的例子）
- 微软项目管理[EPM]数据库剖析2:如何取得全局项目中某个大纲代码的列表值