私はプロのフロントエンド開発者ではありません。主にサーバーサイドのプログラミングをしています。しかし、私は自分でこのタスクを実行する必要があり、アイデアが不足しています。
上の図では、表示されているテーブルの JSP に以下のコードが含まれています。
<table width="100%" style="margin-bottom: 20px;">
<tr>
<td style="padding-bottom: 29px; padding-top: 15px;" colspan="6"><strong style="font-size: 12px;" >Print Queue Report</strong></td>
</tr>
<tr>
<td width="8%" ><strong>Customer:</strong></td>
<td width="18%" style="text-align: left">
<c:choose>
<c:when test="${!empty customersList}">
<html:select property="customer" style="width: 150px;color:#505050;">
<html:option value="">--Select Customer--</html:option>
<html:optionsCollection name="customersList" label="label"
value="key" />
</html:select>
</c:when>
<c:otherwise>
None Available
</c:otherwise>
</c:choose></td>
<td width="10%" style="text-align: right"><strong
style="padding-right: 10px;">HAWB:</strong></td>
<td width="18%" style="text-align: left"><html:text property="hawb" size="20" maxlength="20"
onkeyup="fixHAWB(this);" onchange="fixHAWB(this);"
style="width: 145px;height:12px;">
</html:text></td>
<td width="10%" style="text-align: right"><strong
style="padding-right: 10px;">Branch:</strong></td>
<td width="10%" style="text-align: left">
<c:choose>
<c:when test="${!empty branchList}">
<html:select property="branch" style="width: 150px;color:#505050;">
<html:option value="">--Select Branch--</html:option>
<html:optionsCollection name="branchList" label="label"
value="key" />
</html:select>
</c:when>
<c:otherwise>
None Available
</c:otherwise>
</c:choose>
</td>
<td width="19%"> </td>
<td width="6%"></td>
</tr>
<tr>
<td width="8%" style="text-align: left"><strong
style="padding-right: 10px;">Print Status:</strong></td>
<td width="18%" style="text-align: left">
<html:select property="pStatus" style="width: 150px;color:#505050;">
<html:option value="">--Select Print Status--</html:option>
<html:option value="p">Printed</html:option>
<html:option value="NP">Not Printed</html:option>
</html:select>
</td>
<td width="10%" style="text-align: right"><strong
style="padding-right: 10px;">Completion Status:</strong></td>
<td width="18%" style="text-align: left">
<html:select property="cStatus" style="width: 150px;color:#505050;">
<html:option value="">Select Completion Status</html:option>
<html:option value="S">Completed</html:option>
<html:option value="I">Not Completed</html:option>
</html:select>
</td>
<td width="8%" style="text-align: right"><strong
style="padding-right: 10px;">From: </strong></td>
<td> <html:text
property="startDT" readonly="true" style="width:125px;"
styleClass="dateTxt" /> <IMG src="images/cal.gif"
style="position: relative; top: 2px;"
onclick="cal.select(startDT,'startDT','MM/dd/yyyy')" width="16"
height="16" alt="Click Here to Pick up the date"></td>
<td width="8%" align="right" style="padding-left: 5%;" ><strong
style="padding-right: 5%;">To:</strong></td>
<td align="left" style="text-align: left"><html:text property="endDT" readonly="true"
style="width:125px; margin-left: 0px;" styleClass="dateTxt" /> <IMG
src="images/cal.gif" style="position: relative; top: 2px;"
onclick="cal.select(endDT,'endDT','MM/dd/yyyy')" width="16"
height="16" alt="Click Here to Pick up the date"></td>
<td width="1%"> </td>
<td width="18%"></td>
</tr>
</table>
<table style="position: relative; top: -70px; right: 26px;"
width="100" align="right">
<tr>
<td><html:submit property="method" value="Submit"
onclick="return goodbye();" styleClass="btn2" /></td>
<td><html:submit
property="method" value="Reset" styleClass="btn2" /></td>
</tr>
</table>
「to:」、終了日のテキスト フィールド、およびカレンダー イメージを 1 行に配置し、「from:」グループのように間隔を空けて配置します。送信ボタンとリセットボタンの位置も修正します。
私はこのjspを書きませんでした。私はちょうどそれを修正しようとしています。どんな助けでも大歓迎です。