<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Facility Screen</title>
<script>
function loadxml()
{
//pid=document.getElementById("pid");
input=document.getElementById("customer_id");
alert(input.value);
var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
//alert("hi");
// alert(xmlhttp.responseText);
var res=xmlhttp.responseText.split("+");
s=document.getElementById("select");
for(var j = 0; j < res.length-1; j++)
{
// alert("hi");
var t = document.createElement("option");
t.value =res[j];
t.innerHTML =res[j] ;
s.appendChild(t);
}
}
}
xmlhttp.open("GET","http://localhost:8080/EMS/Facility_controller?cid="+input.value,true);
xmlhttp.send();
}
</script>
<script>
function loadxml1()
{
alert("hi");
var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
res=xmlhttp.responseText.split("+");
s=document.getElementById("select1");
for(var j = 0; j < res.length-1; j++)
{
var t = document.createElement("option");
t.value =res[j];
t.innerHTML =res[j] ;
s.appendChild(t);
}
}
}
xmlhttp.open("GET","http://localhost:8080/EMS/Facilty_type",true);
xmlhttp.send();
}
</script>
<script>
function loadxml2()
{
alert("xml2");
var input=document.getElementById("select1");
var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
res=xmlhttp.responseText.split("+");
s=document.getElementById("select2");
for(var j = 0; j < res.length-1; j++)
{
var t = document.createElement("option");
t.value =res[j];
t.innerHTML =res[j] ;
s.appendChild(t);
}
}
}
xmlhttp.open("GET","http://localhost:8080/EMS/vendor_id?facility="+input.value,true);
xmlhttp.send();
}
</script>
<script >
function loadxml3()
{
facility=document.getElementById("select1");
alert(facility.value);
vendor_id=document.getElementById("select2");
alert(vendor_id.value);
var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://localhost:8080/EMS/Cost_controller?facility="+facility.value+"&vendor_id="+vendor_id.value,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form method="get" >
<table>
<tr>
<td>Customer id</td>
<td><input type="text" id="customer_id" name="customer_id" onblur="loadxml()"></td>
</tr>
</table>
</form>
<table>
<tr><td>VENUE ID</td><td><select id="select" onchange="loadxml1()"></select></td></tr>
<tr><td>FACILITY</td><td><select id="select1" onchange="loadxml2()" ></select></td></tr>
<tr><td>VEDNOR ID</td><td><select id="select2" onchange="loadxml3()"></select></td></tr>
<tr><td>COST</td><td><input type="text" id="myDiv"></td></tr>
<tr><td>QUANTITY</td><td><input type="text" id="quantity" name="quantity"></td></tr>
</table>
</body>
</html>
这是我的事件管理系统项目的前端我在上面执行facility_module我可以使用Ajax从数据库动态填充组合框但是我必须添加相同的字段设施vendor_id成本和数量一次更多当我按下添加按钮并按下提交按钮时按下删除按钮删除字段所有这些值将被添加到数据库。如何使用jquery或Ajax在jsp中再次添加相同的字段？
答案 0 :(得分：0)
html中缺少添加/删除按钮。我假设您将在页面上有这些按钮，以允许用户在表中添加/删除行。这个例子非常适合使用AngularJS。您可以根据Ajax的响应构建模型，然后重复标记以向表中添加更多行。
如果您正在寻找没有AngularJS的解决方案，那么您可以为第一个表行提供一个id。使用jquery id选择器获取该表行的innerHTML。使用innerHTML向表中添加另一行。不要触发另一个ajax调用来获取值。
使用AngularJS的解决方案
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Facility Screen</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script>
var TDataCtrl = function ($scope) {
$scope.venues = [{name:'venue1',value:'venue1'},{name:'venue2', value:'venue2'}];
$scope.facilities = [{name:'facility1',value:'facility1'},{name:'facility2',value:'facility2'}];
$scope.vendors = [{name:'vendor1',value:'vendor1'},{name:'vendor2', value:'vendor2'}];
$scope.tdata = [{'id': '0'}];
$scope.addRow = function(){
$scope.tdata[$scope.tdata.length]={'id':$scope.tdata.length};
};
$scope.removeRow = function(){
$scope.tdata.pop();
};
};
</script>
</head>
<body data-ng-app>
<form method="get">
<table>
<tr>
<td>Customer id</td>
<td><input type="text" id="customer_id" name="customer_id"></td>
</tr>
</table>
</form>
<div data-ng-controller="TDataCtrl">
<table >
<tbody data-ng-repeat="thisrow in tdata">
<tr>
<td>VENUE ID</td>
<td>
<select id="select">
<option ng-repeat="option in venues" value="{{option.value}}">{{option.name}}</option>
</select>
</td>
<td>FACILITY</td>
<td>
<select id="select1">
<option ng-repeat="option in facilities" value="{{option.value}}">{{option.name}}</option>
</select>
</td>
<td>VEDNOR ID</td>
<td>
<select id="select2">
<option ng-repeat="option in vendors" value="{{option.value}}">{{option.name}}</option>
</select>
</td>
<td>COST</td>
<td><input type="text" id="myDiv"></td>
<td>QUANTITY</td>
<td><input type="text" id="quantity" name="quantity"></td>
</tr>
</tbody>
</table>
<input type="button" value="Add" data-ng-click="addRow()"/>
<input type="button" value="Remove" data-ng-click="removeRow()"/>
</div>
</body>
</html>