添加和删除按钮添加和插入到数据库

<%@ 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成本和数量当我按下添加按钮并按删除按钮时按下提交按钮删除字段所有这些值将被添加到数据库中。如何在jsp中使用jquery或Ajax再次添加相同的字段？添加和删除按钮添加和插入到数据库

来源

2014-01-31 user3255995

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>

来源

2014-01-31 05:45:50

如何添加选择元素BY USING ID u能PLEASE演示如何使用内部HTML重复表行 – user3255995

添加和删除按钮添加和插入到数据库

回答

相关问题