动态生成查询条件表单

不太清楚这个是怎么做出来的，可否指教一二，如何实现， jquery的最好jQueryjavascript

解决方案 »

  1.   

    拼接字符串 放到后台解析成sql试试
    比如你新增 或删除了某个文本框后  通过getElementsByTagName获得你剩下的几个文本框
    之后获得这些文本框的内容及数据的内容及数据库的字段名后 拼接sql试试
      

  2.   

    你这个不能用select标签了，只能用div模拟select标签的效果，然后才能在option后面加上+，-号通过javascript来达到动态添加，添加删除的方式就是innertHtml了
      

  3.   

                                       javascript
    1:思路一个页面两个form表单form1,form2
    2:利用Ajax进行查询
    3:重点是有一个页面form3表单与前面表单的form2相同 但查询出来的内容form3表单替换前面form2表单实现无刷新动态查询
      

  4.   

    <body>
     <s:form name="Form1" id="Form1"  method="post" cssStyle="margin:0px;">
    <table cellSpacing="1" cellPadding="0" width="90%" align="center" bgColor="#f5fafe" border="0">
    <TBODY>
    <tr>
    <td class="ta_01" colspan=3 align="center" background="${pageContext.request.contextPath }/images/b-info.gif">
    <font face="宋体" size="2"><strong>数据字典维护</strong></font>
    </td>
    </tr>
    <TR height=10><td colspan=3></td></TR>
    <tr>
    <td class="ta_01" align="right" width="35%" >类型列表：</td>
    <td class="ta_01" align="left"  width="30%" >
    <s:select list="#request.list" id="keyword" name="keyword"
              listKey="keyword" listValue="keyword"
              headerKey="jerrynew" headerValue=""
              cssStyle="width:180px" cssClass="bg" onchange="changetype()"
              >
    </s:select>
    </td>

     <td class="ta_01"  align="right" width="35%" >       
        </td>   
    </tr>



        <tr>
           <td class="ta_01" align="right" width="35%" id="newtypename">类型名称：</td>
       <td class="ta_01"  align="left" width="30%"  height=20 id="newddlText">
        <input type="text" name="keywordname" maxlength="25" size=24>
       </td>
       <td class="ta_01"  align="right" width="35%" ></td>
    </tr>


    <TR height=10><td colspan=3 align="right">
       <input type="button" name="saveitem" value="添加选项" style="font-size:12px; color:black; height=20;width=80" onClick="insertRows()">
     </td></TR>   
    </TBODY>
    </table>
    </s:form>

     <s:form name="Form2" id="Form2"  method="post" cssStyle="margin:0px;">
        <table cellSpacing="1" cellPadding="0" width="90%" align="center" bgColor="#f5fafe" border="0" >
        <tr>
         <td >
       <table cellspacing="0"   cellpadding="1" rules="all" bordercolor="gray" border="1" id="dictTbl"
        style="BORDER-RIGHT:gray 1px solid; BORDER-TOP:gray 1px solid; BORDER-LEFT:gray 1px solid; WIDTH:100%; WORD-BREAK:break-all; BORDER-BOTTOM:gray 1px solid; BORDER-COLLAPSE:collapse; BACKGROUND-COLOR:#f5fafe; WORD-WRAP:break-word">



    <tr style="FONT-WEIGHT:bold;FONT-SIZE:12pt;HEIGHT:25px;BACKGROUND-COLOR:#afd1f3">
    <td class="ta_01" align="center"  width="20%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">编号</td>
    <td class="ta_01" align="center"  width="60%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">名称</td>
    <td class="ta_01" align="center"  width="20%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">删除</td>
    </tr>
        
       
         <tr>
       <td class="ta_01" align="center"  width="20%">1</td>
       <td class="ta_01" align="center"  width="60%">
       <input id="itemname" name="itemname" type="text"  size="45" maxlength="25"></td>
       <td class="ta_01" align="center"  width="20%"></td>
    </tr>
         </table>
       </td>
     </tr>
      <tr>
         <td >   
     </td>
     </tr>
     <TR height=10><td colspan=3></td></TR>
      <tr>
         <td align="center" colspan=3>
           <input type="button" name="saveitem" value="保存" style="font-size:12px; color:black; height=20;width=50" onClick="return saveDict();">
     </td>
     </tr>
     
           <input type="hidden" name="keywordname" >
           <input type="hidden" name="typeflag" >
     
      </table>
      </s:form>
      </body>
      

  5.   

    function changetype(){

      if(document.Form1.keyword.value=="jerrynew"){
        
         
        var textStr="<input type=\"text\" name=\"keywordname\" maxlength=\"50\" size=\"24\"> ";
         document.getElementById("newtypename").innerHTML="类型名称：";
         document.getElementById("newddlText").innerHTML=textStr;
         
         /**
          使用Ajax框架进行异步操作：
             * 使用ajax引擎的send方法发送数据，发送的是Form1表单中的属性值做为参数
             * 通过system/elecSystemDDlAction_edit.do链接访问后台数据，
                 获取到的查询结果放到dictionaryEdit.jsp中，用dictionaryEdit.jsp的内容替换到
               dictionaryIndex.jsp中Form2中
         */
         Pub.submitActionWithForm('Form2','system/elecSystemDdlAction_edit.do','Form1');
        
      }else{
        
        var textStr="";
        document.getElementById("newtypename").innerHTML="";
        document.getElementById("newddlText").innerHTML=textStr;
         
        Pub.submitActionWithForm('Form2','system/elecSystemDdlAction_edit.do','Form1');
      }  
       }
       
         function saveDict(){
          /**
          
            headerKey="jerrynew" headerValue=""
          
          */
          if(document.Form1.keyword.value=="jerrynew"){
              if(Trim(document.Form1.keywordname.value)==""){
                 alert("请输入类型名称");
                 return false;
              }
           
             var allkeywords= document.Form1.keyword;
             for(var i=0;i<allkeywords.length;i++){
        
                if(allkeywords[i].value==Trim(document.Form1.keywordname.value)){                           alert("已存在此类型名称,请重新输入");
                   return false;
                 }
                 
             }
             
              document.Form2.keywordname.value=document.Form1.keywordname.value;
              document.Form2.typeflag.value="new";
              
          }else{
          
              document.Form2.keywordname.value=document.Form1.keyword.value;
              document.Form2.typeflag.value="add";
          }
          var tbl=document.getElementById("dictTbl");
          var b=document.getElementById("itemname");
         if(b==null)
          {
           alert('不能全部删除!');
           return false;
          }
          for (i=1;i<tbl.rows.length;i++){   
             var a=  tbl.rows[i].cells[1].children;
             
           
           var name = tbl.rows[i].cells[1].children.item(0).value;
           //alert(name);
          
          }
          for(k=1;k<=tbl.rows.length-2;k++)
      {
         for(m=k+1;m<=tbl.rows.length-1;m++)
         {     
          var name1 = tbl.rows[k].cells[1].children.item(0).value;
          var name2 = tbl.rows[m].cells[1].children.item(0).value;
          if(name1 == name2){
          alert("名称不能相同！"); 
           return false;
            }
        }
      }
          document.Form2.action="system/elecSystemDdlAction_save.do";
          document.Form2.submit();     
    }
      
      
           
      function removecheck(seqid){
         if( !confirm("你确定删除吗?")) return false;
          
          document.Form2.keywordname.value=document.Form1.keyword.value;
          document.Form2.action="removeDict.do?seqid="+seqid;
          document.Form2.submit();
      }        function insertRows(){ 
      var tempRow=0; 
      var tbl=document.getElementById("dictTbl");
      tempRow=tbl.rows.length; //获取当前table的行数
      var Rows=tbl.rows;//类似数组的Rows 
      var newRow=tbl.insertRow(tempRow);//  在表格中插入一个新行。
      
      var Cells=newRow.cells;//返回包含行中所有单元格的一个数组。  for (i=0;i<3;i++)//每行的3列数据 
      { 
        // alert(newRow.rowIndex + "   " + Cells.length);
         //insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。
         var newCell=Rows(newRow.rowIndex).insertCell(Cells.length); 
         newCell.align="center"; 
         switch (i) 
        { //返回包含行中所有单元格的一个数组。
          case 0 : newCell.innerHTML="<td class=\"ta_01\" align=\"center\"  width=\"15%\">"+tempRow+"</td>";break; 
          case 1 : newCell.innerHTML="<td class=\"ta_01\" align=\"center\"  width=\"60%\"><input name=\"itemname\" type=\"text\" id=\""+tempRow+"\" size=\"45\" maxlength=25></td>";break; 
          case 2 : newCell.innerHTML="<td class=\"ta_01\" align=\"center\"  width=\"25%\"><a href='javascript:delTableRow(\""+tempRow+"\")'><img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a></td>";break;    } 
      } 
     } 
    function delTableRow(rowNum){ 
    //alert(rowNum+'---delTableRow-----');
       var tbl=document.getElementById("dictTbl");
     
        if (tbl.rows.length >rowNum&&tbl.rows.length>2){ 
        
           tbl.deleteRow(rowNum);       for (i=rowNum;i<tbl.rows.length;i++)
           {
             tbl.rows[i].cells[0].innerText=i;
             tbl.rows[i].cells[2].innerHTML="<a href='javascript:delTableRow(\""+i+"\")'><img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>";      
          }
       }
        else{
        
         alert('最后一行不能删除');
           document.URL;
        
        }
    }