0
我设计了一个获取用户输入的动态表格。表格的每一列都包含不同类型的字段，如文本框，下拉框，复选框等。我应该如何在表格中添加滚动条？我在互联网上搜索它，但我只能得到表格中纯文本的解决方案，而其他解决方案太复杂了。如果你可以把我介绍给一些基本的网站，那会很棒。如何使用html和Javascript在表格中添加滚动条？
如下：
<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>
为了将来的参考，Sahil，如果您不*使用* TABS和缩进空格，您的代码在StackOverflow中看起来会更好。 – pavium 2009-11-02 04:20:16
可以使用Pretty Diff工具进行这种修正，该工具会忽略ASP和PHP标记中的空白区域。 – 2009-11-02 08:36:46