一段JS

最新推荐文章于 2023-02-14 14:35:26 发布
原创最新推荐文章于 2023-02-14 14:35:26 发布 · 582 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#div #table
本文介绍了一种使用JavaScript实现的动态表单生成方法，该方法可根据不同需求自动生成包含多种输入项的表单，并对各项输入进行有效性验证。文章详细解释了如何通过JavaScript操作DOM元素来动态创建和移除表单元素，以及如何确保所有必填字段都已正确填写。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
    <script type="text/javascript">
           function gettheValue()
           {
               
                var PriceNames = document.getElementsByName("thePriceName");  //显示名称 
                var Prices = document.getElementsByName("thePrice");  //单价 
                var MinSuns = document.getElementsByName("theMiSum");  //购买的最少数量 
                var SunNums = document.getElementsByName("theSuNum");  //票务总数量 
                var LastNums = document.getElementsByName("theLasNum");  //剩余数量 
                var UserTypeIDs = document.getElementsByName("myUserTypeIDs"); //用户类型 
                var strTheValue1="";//显示名称 
                var strTheValue2="";//单价 
                var strTheValue3="";//购买最少数量 
                var strTheValue4="";//票务总数量 
                var strTheValue5="";//剩余数量 
                var strTheValue6="";//用户类型 
                
                for (var i = 0; i < PriceNames.length; i++)    
                 {          
                        if(PriceNames[i].value.length !=0)
                        {
                            strTheValue1=strTheValue1+"|"+PriceNames[i].value; 
                        }else
                        {
                           alert("请填写显示名称！");
                           PriceNames[i].focus();
                           return;
                        }
                        //-------------------------------------------------- 
                        if(Prices[i].value.length !=0)
                        {
                            strTheValue2=strTheValue2+"|"+Prices[i].value; 
                        }else
                        {
                             alert("请填写票务单价！");
                             Prices[i].focus();
                             return;
                        }
                        //---------------------------------------------------- 
                        if(MinSuns[i].value.length !=0)
                        {
                            strTheValue3=strTheValue3+"|"+MinSuns[i].value; 
                        }else
                        {
                             alert("请填写最少购买数量！");
                             MinSuns[i].focus();
                             return;
                        } 
                        
                          //---------------------------------------------------- 
                        if(SunNums[i].value.length !=0)
                        {
                            strTheValue4=strTheValue4+"|"+SunNums[i].value; 
                        }else
                        {
                            alert("请填写总数量！");
                            SunNums[i].focus();
                            return;
                        }      
                          //---------------------------------------------------- 
                        if(LastNums[i].value.length !=0)
                        {
                            strTheValue5=strTheValue5+"|"+LastNums[i].value; 
                        }else
                        {
                             alert("请填写最后剩余数量！");
                             LastNums[i].focus();
                             return;
                        }      
                          //---------------------------------------------------- 
                           strTheValue6=strTheValue6+"|"+UserTypeIDs[i].value; 
//                        if(UserTypeIDs[i].value.length !=0) 
//                        { 
//                            strTheValue6=strTheValue6+"|"+UserTypeIDs[i].value;  
//                        }else 
//                        { 
//                            movetheDiv(i); 
//                            gettheValue(); 
//                        }            
                   }  
                document.getElementById("txtConcessions").value=strTheValue1;//显示名称 
                document.getElementById("txtPrice").value=strTheValue2;//单价 
                document.getElementById("txtMinNum").value=strTheValue3;//购买最少数量 
                document.getElementById("txtSunNum").value=strTheValue4;//票务总数量 
                document.getElementById("tztLastNum").value=strTheValue5;//剩余数量 
                document.getElementById("UserTypeIDs").value=strTheValue6;//用户类型 
               
           }
           
           function movetheDiv(i)//移除DIV 
           {
                 i=i-0;//转换成数字 
                 //alert(i); 
                 //alert(theDivs[0].name); 
                 var theDivs = document.getElementsByName("addDiv");//得到所有的层 
                 alert(theDivs.length);
                 theDivs[i].parentNode.removeChild(theDivs[i]);   //删除 
                 
                 //theDivs[i].style.display   =   "none";   //删除div 
                
           }
           var theSelect="  ";
            function addFile()
            {    
               
                var str="<div class='theDiv' name='addDiv'> <table>";
                str =str+'<tr><td>价格名称：     </td><td><INPUT type="text"  NAME="thePriceName"></td><td> <span style="color: #ff0066">* </span> </td>'//显示的名称 
                str =str+'<td>单价：         </td><td><INPUT type="text"  NAME="thePrice" ></td><td> <span style="color: #ff0066">* </span> </td>'//单价  
                str =str+'<td>购买最少数量： </td><td><INPUT type="text"  NAME="theMiSum" ></td><td> <span style="color: #ff0066">* </span> </td></tr>'//购买的数量  
                str =str+'<tr><td>总数量：       </td><td><INPUT type="text"  NAME="theSuNum" ></td><td> <span style="color: #ff0066">* </span> </td>'// 票务的总数量  
                str =str+'<td>剩余数量：     </td><td><INPUT type="text"  NAME="theLasNum"  onblur="gettheValue()"></td><td> <span style="color: #ff0066">* </span> </td>'// 票务的总数量  
                str =str+'<td>用户类型：     </td><td>'+theSelect+'</td><td></td></tr>'// 用户类型  
                str=str+"</table></div>";
                document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str)
                
                
              }
            
             
             
        function createSelect(theValues,theNames){
       
            var thevalue=theValues.split("|");
            var thename=theNames.split("|");
            var mySelect = '<select id="myUserTypeIDs" onblur="gettheValue()">';
              for(var i=0;i<thevalue.length;i++)
              {
                  mySelect=mySelect+'<option value="'+thevalue[i]+'">'+thename[i]+'</option>';
              }
       
            mySelect=mySelect + '</select>'; 
            theSelect= mySelect;  
       
    }
    
    
     
    </script>