动态增删输入框和下拉列表框源代码------下拉列表值从数据库取得（Ajax）

最新推荐文章于 2018-06-28 13:54:50 发布

yangyinbo

最新推荐文章于 2018-06-28 13:54:50 发布

阅读量1.7k

点赞数

分类专栏：综合文章标签：数据库 ajax null url

本文链接：https://blog.csdn.net/yangyinbo/article/details/2826884

版权

综合专栏收录该内容

18 篇文章 0 订阅

订阅专栏

 
 <!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就好，和写ＪＳＰ页面一样。

yangyinbo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态增删输入框和下拉列表框源代码------下拉列表值从数据库取得（Ajax）

html>head> title>动态增删表格行title> script language="JavaScript">var request = false;var rowIndex=0;va
复制链接

扫一扫