html과 자바 스크립트를 사용하여 스크롤러를 테이블에 추가하는 방법은 무엇입니까?

Question

사용자로부터 입력을받는 동적 테이블을 설계했습니다. 테이블의 각 열에는 텍스트 상자, 드롭 다운, 체크 상자 등과 같은 여러 유형의 필드가 있습니다. 테이블 주위에 스크롤러를 추가하려면 어떻게해야합니까? 인터넷에서 검색했지만 테이블의 일반 텍스트에 대한 솔루션 만 얻을 수 있었고 다른 솔루션은 너무 복잡했습니다. 당신이 위대한 것입니다 그것에 대해 기본적인 이야기 일부 사이트로 나를 참조 할 수 있다면. 로 아래

:

<table width="98%" border="0" cellpadding="1" cellspacing="1" align="center"> 
     <tr> 
     <td> 
     <input name="addRow" type="button" class="btn" value=" + " onclick="this.form.changeType.value='addRow';document.FileUploadFormatAdd.submit()"></input> 
     </td> 
     <td> 
     <input name="deleteRow" type="button" class="btn" value=" - " onclick="this.form.changeType.value='deleteRow';document.FileUploadFormatAdd.submit()"></input> 
     </td> 
     </tr> 
     <tr> 

       <td width="3%" class="bandcolorsubheader">Sr No.</td> 
       <td width="6%" class="bandcolorsubheader">Field Name*</td> 
       <td width="4%" class="bandcolorsubheader">Min Length</td> 
       <td width="4%" class="bandcolorsubheader">Max Length</td> 
       <td width="6%" class="bandcolorsubheader">Type*</td> 
       <td width="4%" class="bandcolorsubheader">Future Date Allowed</td> 
       <td width="4%" class="bandcolorsubheader">Past Date Allowed</td> 
       <td width="4%" class="bandcolorsubheader">Required Field</td> 
       <td width="6%" class="bandcolorsubheader">Depends Upon Field Name</td> 
       <td width="7%" class="bandcolorsubheader">Depends Upon Field Value(Comma Separated Values)</td> 
       <td width="4%" class="bandcolorsubheader">Min Value</td> 
       <td width="4%" class="bandcolorsubheader">Max Value</td> 
       <td width="4%" class="bandcolorsubheader">Field Order*</td> 
       <td width="35%" class="bandcolorsubheader">Sql Query</td> 
       <td width="5%" class="bandcolorsubheader">Date Format</td> 
      </tr> 
     <input type="hidden" name="noOfRows" value="<%=noOfRows%>"> 
     <% 
      try 
      { 
     %> 
     <% 
     Iterator iterFieldValues=listOfFields.iterator(); 
     debugger="9"; 
     %> 
     <% 
      String classColor = null; 
      for (int i=1;i<=noOfRows;i++){ 
     %> 
     <% 
        if((i%2)==0) 
         classColor = "tblrowwhite"; 
       else 
         classColor = "tblrowgrey"; 
      %> 
     <tr> 
     <td width="3%" class="<%=classColor%>"> 
     <%=i%> 
     </td> 

     <% 
     String fieldName=(String)iterFieldValues.next(); 
     %> 
     <td width="6%" class="<%=classColor%>"> 
     <input type="text" class="ibox" name="<%="reqdFieldName"+i%>" value="<%=(fieldName!=null)?fieldName:""%>" size="20" MAXLENGTH="100" <%=operationType.trim().equalsIgnoreCase("view")?"readonly":""%>> 
     </td> 
     <% 
     String minLength=(String)iterFieldValues.next(); 
     %> 
     <td width="4%" class="<%=classColor%>"> 
     <input type="text" class="ibox" name="<%="minLength"+i%>" value="<%=(minLength!=null)?minLength:""%>" size="10" MAXLENGTH="5" <%=operationType.trim().equalsIgnoreCase("view")?"readonly":""%>> 
     </td> 
     <% 
     String maxLength=(String)iterFieldValues.next(); 
     %> 
     <td width="4%" class="<%=classColor%>"> 
     <input type="text" class="ibox" name="<%="maxLength"+i%>" value="<%=(maxLength!=null)?maxLength:""%>" size="10" MAXLENGTH="5" <%=operationType.trim().equalsIgnoreCase("view")?"readonly":""%>> 
     </td> 
     <% 
     String fieldType=(String)iterFieldValues.next(); 
     %> 

     <td width="6%" class="<%=classColor%>"> 
     <select name="<%="reqdType"+i%>" class="cbox" onchange='EnableFields(this)' <%=operationType.trim().equalsIgnoreCase("view")?"disabled":""%>> 
     <option value="" >Select</option> 
     <% 
      Iterator iter=fieldValidationTypes.iterator(); 
      while(iter.hasNext()) 
      { 
       String fieldValidationType=(String)iter.next(); 
       if(fieldValidationType!=null&&!fieldValidationType.trim().equals("")) 
       { 

     %> 

     <option value="<%=fieldValidationType%>" <%=fieldType.equals(fieldValidationType)?"selected":"" %> ><%=fieldValidationType.toUpperCase()%></option> 
     <% 
       } 
      } 
     %> 
     </select> 
     </td> 

     <% 
     String isFutureDateAllowedValue=(String)iterFieldValues.next(); 
     %> 

     <td width="4%" class="<%=classColor%>"> 
     <input type="checkBox" value="1" name="<%="isFutureDateAllowed"+i%>" <%=isFutureDateAllowedValue.equals("1")?"checked":""%> <%=(!operationType.trim().equalsIgnoreCase("view"))&&fieldType.equalsIgnoreCase("Date")?"":"disabled"%> > 
     </td> 
     <% 
     String isPastDateAllowedValue=(String)iterFieldValues.next(); 
     %> 
     <td width="4%" class="<%=classColor%>"> 
     <input type="checkBox" value="1" name="<%="isPastDateAllowed"+i%>" <%=isPastDateAllowedValue.equals("1")?"checked":""%> <%=(!operationType.trim().equalsIgnoreCase("view"))&&fieldType.equalsIgnoreCase("Date")?"":"disabled"%> > 
     </td> 
     <% 
     String isReqdFieldValue=(String)iterFieldValues.next(); 
     %> 

     <td width="4%" class="<%=classColor%>"> 
     <input type="checkBox" value="1" name="<%="isReqdField"+i%>" <%=isReqdFieldValue.equals("1")?"checked":""%> <%=operationType.trim().equalsIgnoreCase("view")?"disabled":""%> > 
     </td> 
     <% 
     String dependsUponFieldName=(String)iterFieldValues.next(); 
     %> 
     <td width="6%" class="<%=classColor%>"> 
     <input type="text" class="ibox" name="<%="dependsUponFieldName"+i%>" value="<%=(dependsUponFieldName!=null)?dependsUponFieldName:""%>" size="20" MAXLENGTH="100" <%=operationType.trim().equalsIgnoreCase("view")?"readonly":""%>> 
     </td> 
     <% 
     String dependsUponFieldValue=(String)iterFieldValues.next(); 
     %> 
     <td width="7%" class="<%=classColor%>"> 
     <input type="text" class="ibox" name="<%="dependsUponFieldValue"+i%>" value="<%=(dependsUponFieldValue!=null)?dependsUponFieldValue:""%>" size="20" MAXLENGTH="500" <%=operationType.trim().equalsIgnoreCase("view")?"readonly":""%>> 
     </td> 
     <% 
     String minValue=(String)iterFieldValues.next(); 
     %> 
     <td width="4%" class="<%=classColor%>"> 
     <input type="text" class="ibox" name="<%="minValue"+i%>" value="<%=(minValue!=null)?minValue:""%>" size="10" MAXLENGTH="10" <%=operationType.trim().equalsIgnoreCase("view")?"readonly":""%>> 
     </td> 
     <% 
     String maxValue=(String)iterFieldValues.next(); 
     %> 
     <td width="4%" class="<%=classColor%>"> 
     <input type="text" name="<%="maxValue"+i%>" class="ibox" value="<%=(maxValue!=null)?maxValue:""%>" size="10" MAXLENGTH="10" <%=operationType.trim().equalsIgnoreCase("view")?"readonly":""%>> 
     </td> 
     <% 
     String fieldOrder=(String)iterFieldValues.next(); 
     %> 
     <td width="4%" class="<%=classColor%>"> 
     <input type="text" name="<%="reqdFieldOrder"+i%>" class="ibox" value="<%=(fieldOrder!=null)?fieldOrder:""%>" size="10" MAXLENGTH="3" <%=operationType.trim().equalsIgnoreCase("view")?"readonly":""%>> 
     </td> 
     <% 
     String sqlQuery=(String)iterFieldValues.next(); 
     %> 

     <td width="35%" class="<%=classColor%>"> 
     <input type="text" name="<%="sqlQuery"+i%>" value="<%=(sqlQuery!=null)?sqlQuery:""%>" size="65" MAXLENGTH="1000" <%=(!operationType.trim().equalsIgnoreCase("view"))&&fieldType.equalsIgnoreCase("codenosql")?"":"readonly"%>> 
     </td> 
     <% 
     String dateFormat=(String)iterFieldValues.next(); 
     %> 
     <td width="5%" class="<%=classColor%>"> 
     <input type="text" name="<%="dateFormat"+i%>" class="ibox" value="<%=(dateFormat!=null)?dateFormat:""%>" size="10" MAXLENGTH="1000" <%=(!operationType.trim().equalsIgnoreCase("view"))&&fieldType.equalsIgnoreCase("Date")?"":"readonly"%>> 
     </td> 
     </tr> 
     <%}%> 
     <% 
      } 
     catch(Exception e) 
     { 
      response.sendRedirect("error.jsp?entity=interfaces&mesg="+"Error while loading page."); 
     } 

     %> 


     </table> 
     <br> 
     <table width="100%" border="0" cellpadding="2" cellspacing="1"> 
     <tr> 
     <input type="hidden" name="operationType" value="<%=operationType%>"> 
     <input type="hidden" name="changeType" value=""> 
     <% 
      if(!operationType.trim().equals("view")) 
      { 
     %> 
     <input name="addFileFormat" value="Submit" class="btn" type="button" onclick="this.form.changeType.value='addFileFormat';if(validate(this.form)) document.FileUploadFormatAdd.submit(); "></input> 
     <% 
      } 
     %> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table> 

Answer 1

당신은 테이블이 더 큰 것으로 끝나는 경우 스크롤 막대를 최대 너비/높이를 설정하고 추가하려고합니까? 그렇다면, 당신은이 작업을 수행 할 수 있습니다

<div style="width:500px; height:500px overflow=auto"> 
<table> 
<%buildTable()%> 
</table> 
</div> 

overflow=auto 필요한 경우 스크롤 막대 줄 것이다. 자세한 내용은 this 사이트를 확인하십시오. 희망이 도움이됩니다.