Javascript jsp中的添加和删除按钮，用于在插入数据库之前添加和删除字段设施屏幕函数loadxml（） { //pid=document.getElementById（“pid”）；输入=document.getElementById（“客户id”）；警报（输入值）； var-xmlhttp； if（window.XMLHttpRequest） { xmlhttp=新的XMLHttpRequest（）； } xmlhttp.onreadystatechange=函数（） { if（xmlhttp.readyState==4&&xmlhttp.status==200） { //警报（“hi”）； //警报（xmlhttp.responseText）； var res=xmlhttp.responseText.split（“+”）； s=document.getElementById（“选择”）；对于（var j=0；j_Javascript_Jquery_Html_Ajax_Jsp

Javascript jsp中的添加和删除按钮，用于在插入数据库之前添加和删除字段设施屏幕函数loadxml（） { //pid=document.getElementById（“pid”）；输入=document.getElementById（“客户id”）；警报（输入值）； var-xmlhttp； if（window.XMLHttpRequest） { xmlhttp=新的XMLHttpRequest（）； } xmlhttp.onreadystatechange=函数（） { if（xmlhttp.readyState==4&&xmlhttp.status==200） { //警报（“hi”）； //警报（xmlhttp.responseText）； var res=xmlhttp.responseText.split（“+”）； s=document.getElementById（“选择”）；对于（var j=0；j

javascript jquery html ajax jsp

Javascript jsp中的添加和删除按钮，用于在插入数据库之前添加和删除字段设施屏幕函数loadxml（） { //pid=document.getElementById（“pid”）；输入=document.getElementById（“客户id”）；警报（输入值）； var-xmlhttp； if（window.XMLHttpRequest） { xmlhttp=新的XMLHttpRequest（）； } xmlhttp.onreadystatechange=函数（） { if（xmlhttp.readyState==4&&xmlhttp.status==200） { //警报（“hi”）； //警报（xmlhttp.responseText）； var res=xmlhttp.responseText.split（“+”）； s=document.getElementById（“选择”）；对于（var j=0；j,javascript,jquery,html,ajax,jsp,Javascript,Jquery,Html,Ajax,Jsp,这是我的事件管理系统项目的前端，我在该项目上执行facility_模块。我可以使用Ajax从数据库动态填充组合框，但我必须在按下add按钮时再次添加相同的字段facility vendor_id成本和数量，在按下remove按钮时删除字段在按下提交按钮时，所有这些值都将添加到数据库中。如何使用jquery或Ajax在jsp中再次添加相同的字段 html中缺少添加/删除按钮。我假设页面上有这些按钮，允许用户从表中添加/删除行。此示例非常适合使用AngularJS。您可以基于来自Ajax的响应构建模

这是我的事件管理系统项目的前端，我在该项目上执行facility_模块。我可以使用Ajax从数据库动态填充组合框，但我必须在按下add按钮时再次添加相同的字段facility vendor_id成本和数量，在按下remove按钮时删除字段在按下提交按钮时，所有这些值都将添加到数据库中。如何使用jquery或Ajax在jsp中再次添加相同的字段

html中缺少添加/删除按钮。我假设页面上有这些按钮，允许用户从表中添加/删除行。此示例非常适合使用AngularJS。您可以基于来自Ajax的响应构建模型，然后可以重复标记以向表中添加更多行

如果您正在寻找一个没有AngularJS的解决方案，那么您可以为第一个表行提供一个id。使用jquery id选择器获取该表行的innerHTML。使用innerHTML向表中添加另一行。不要触发另一个ajax调用来获取值

使用AngularJS的解决方案

<%@ 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>


设施屏幕
var TDataCtrl=函数（$scope）{
$scope.vices=[{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=函数（）{
$scope.tdata[$scope.tdata.length]={'id'：$scope.tdata.length}；
};
$scope.removeow=函数（）{
$scope.tdata.pop（）；
};
};
客户id
场馆ID
{{option.name}
设施
{{option.name}
维德诺尔号
{{option.name}
成本
量

如何使用ID添加SELECT元素请演示如何使用内部HTML重复表格行

<!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>