多个下拉列表(select)不能取重复值判断-动态增加输入框－模仿CSDN结贴时分数判断-但无层提示-Ajax取值(全部源码)

来源：互联网发布：淘宝网三星a9手机壳编辑：程序博客网时间：2024/05/22 10:43

<!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/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++) {
        
            subMenu1subMenu1 = 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++) {
           subMenu2subMenu2 = 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++)
{
MyOptionMyOption=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 objobjSourceRow=obj.parentNode.parentNode;
var objobjTable=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='tixing' id='"+rowIndex+"'onChange='checkTixing(this)'>"+AddOption(Values,Strs)+"</select>";
objCell=objRow.insertCell(2);
objCell.innerHTML="<input name='"+rowIndex+"' value = ''>"
objCell=objRow.insertCell(3);
objCell.innerHTML="<input name='tb_score' value = '' id='point'>";
objCell=objRow.insertCell(4);
objCell.innerHTML=objSourceRow.cells[4].innerHTML.replace(/增加/,'删除');
}
else{
objTable.lastChild.removeChild(objSourceRow);
rowIndex--;
} 
}
function checkTixing(obj){
 var  tixing=document.getElementsByName('tixing');
    
    for(var i = 0;i<tixing.length;i++)
    {
         if(obj!=tixing[i] && obj.value==tixing[i].value)
         {
            alert("题型重复了，请选择另一个!");
            return;
         }
        
    }
}
function checkPoint(){
//var points = document.getElementById("point").innerHTML;
var points=20;
var txts = document.getElementsByName("tb_score");
//alert("txts.length:"+txts.length);
for(var i=0;i<txts.length;++i)
{
  
    var score = new Number(txts[i].value);
    
    if (score<0)
    {
        alert("不能给负分");
        focusOnPoint(txts[i]);
        return false;
    }
     if (score==0)
    {
        alert("不能不给分");
        focusOnPoint(txts[i]);
        return false;
    }
    if (score >0)
    {
        points-=score;
        continue;
    }
    
}//end for
if(points!=0){
    alert("给分与总分不符,请重新分配!");
if(txts.length>0)focusOnPoint(txts[0]);
return false;
}
return confirm('你确定要提交吗?')
}
function focusOnPoint(tb){
tb.style.backgroundColor="red";
tb.onchange=function(){tb.style.backgroundColor="white";}
tb.focus();
}
    </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" action="menujsp.jsp" 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> 
            如果可用分分配完毕,请点击
                <a onclick="return checkPoint();" href="Google-Search.html">确认结贴</a>
            </td>
            <td><label>
                               问题点数
            </label>            </td>
            <td><div id="point" style="background: yellow; border: solid 1px red"><p>20</p></div>
                
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

数据页面

lookupCustomer.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();
            
 %>