页面显示

  <div id="workaround"  style="overflow:hidden;"  >
   <c:import url="/include/orderHead.jsp"></c:import>
  <table width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr class="tableHead">
       </tr>
</table>
<div style="height:360px;overflow:auto;overflow-x:hidden; ">
<table id="orderDetailView" width="100%" border="0" cellspacing="1" cellpadding="0">
<c:forEach var="orderDetail" items="${orderDetailList}" varStatus="status">
        <tr>
        <td width="40"  >${status.index+1}</td>
        <td width="80"  >${orderDetail.indexCode}</td>
        <td width="80"  >${orderDetail.code}</td>
        <td width="100" >${orderDetail.name}</td>
        <td width="80"  >${orderDetail.colorName}</td>
        <td width="100" >${orderDetail.theme}</td>           
        <td width="120" ><input type="text" value= "${orderDetail.quantity}" class="t2"  onkeypress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false"    maxlength="11" style="ime-mode:disabled" />        </td>
       </tr>
    </c:forEach>
</table>


蓝色为对显示的列表内容可编辑的效果class=“t2”
/*TEXT*/
span.bright{ color:#FF3300;}
p{padding:4px;}

/*from*/
input.text{ background:url(../img/input_bg.gif) #f5f5f5; padding:2px;
border-top:#A3B5C3 solid 1px;border-right:#9FB1BF solid 1px;border-bottom:#9FB1BF solid 1px; border-left:#9FB1BF solid 1px;}
textarea{width:420px;inFocus:false;border:0px #fff solid;padding:1px;backgroundColor:transparent;cursor:pointer;overflow-Y:hidden;height:28px;line-height:120%;SCROLLBAR-FACE-COLOR: #d5e7ef; SCROLLBAR-ARROW-COLOR: #909eae; SCROLLBAR-DARKSHADOW-COLOR: #b8c6d7; SCROLLBAR-BASE-COLOR: #c9dbea;  }
select{  border:#3366FF solid 1px; background:#f0f4fa}
/*数据表*/
input.code,input.t1,input.t2,input.t3{ width:inherit;background:url(../img/input_bg.gif) #f5f5f5;margin:0px; padding:2px; border:#CCCCCC 1px solid; }
input.code{width:48px;}
input.t1{width:42px;}
input.t2{width:112px;}
input.t3{width:256px;}
input.nomber,input.code{ime-mode:disabled;}
.right4{ text-align:right; padding-right:4px; }
.left4{ text-align:left; padding-left:4px; }
/*JS相关*/
#XiframeBOx{ background:#CCCCCC; border: solid #efefef 6px; display:none; padding:2px;filter:Alpha(Opacity=90);}
.onFocus{ border:#FF9900 solid 1px;    background:url(../img/input_bg.gif) #f5f5f5; padding:2px;}
/*伪类*/
a:link,a:visited{text-decoration:none;color:#4CA46F;}
sa:hover{color:#489577;}
#chimg1,#chimg2,#chimg3{float:left; margin-left:4px; cursor:pointer; }
#chimg1{ height:18px; width:18px; background:url(../img/icon/resultset_previous_.gif); }
#chimg1:hover{ background:url(../img/icon/resultset_previous.gif); }
#chimg2{ height:18px; width:18px; background:url(../img/icon/resultset_next_.gif); }
#chimg2:hover{background:url(../img/icon/resultset_next.gif); }
#chimg3{ height:18px; width:18px; background:url(../img/icon/arrow_refresh_.gif); }
#chimg3:hover{background:url(../img/icon/arrow_refresh.gif); }