DIV+Table實現複雜表單

使用jsp頁面實現一個報告的錄入，由於表單比較複雜，而項目進度又比較緊，所以就沒有花時間去研究一些專門做報告的表單工具，湊合著使用DIV+table也算是完成了任務。

頁面範例如：

 

JavaScript代碼如下：

function $(element){<br />return element = document.getElementById(element);<br />}<br />var mh = 40;<br />var step = 10;<br />var ms = 10;<br />function toggle(o){<br />if (!o.tid)o.tid = "_" + Math.random() * 100;<br />if (!window.toggler)window.toggler = {};<br />if (!window.toggler[o.tid]){<br /> window.toggler[o.tid]={<br /> obj:o,<br /> maxHeight:o.offsetHeight,<br /> minHeight:mh,<br /> timer:null,<br /> action:1<br /> }; }<br />o.style.height = o.offsetHeight + "px";<br />if (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);<br />window.toggler[o.tid].action *= -1;<br />window.toggler[o.tid].timer = setTimeout("anim('"+o.tid+"')",ms );<br />}<br />function anim(id){<br />var t = window.toggler[id];<br />var o = window.toggler[id].obj;<br />if (t.action < 0){<br /> if (o.offsetHeight <= t.minHeight){<br /> clearTimeout(t.timer);<br /> return;<br /> }<br />}<br />else{<br /> if (o.offsetHeight >= t.maxHeight){<br /> clearTimeout(t.timer);<br /> return;<br /> }<br />}<br />o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px";<br />window.toggler[id].timer = setTimeout("anim('"+id+"')",ms );<br />}

 

css代碼如下：

<mce:style type="text/css"><!--<br /> body {<br />font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;<br />color: #4f6b72;<br />background: #E6EAE9;<br />}<br />td {<br />border-right: 1px solid #C1DAD7;<br />border-bottom: 1px solid #C1DAD7;<br />background: #fff;<br />font-size:11px;<br />padding: 6px 6px 6px 12px;<br />color: #4f6b72;<br />}<br />div{<br />margin-bottom: 0;<br />margin-top: 0;<br />padding-bottom: 0;<br />padding-top: 0;<br />size: 700px;<br />}<br />table{<br />width:700px;<br />padding:0;<br />margin:0;<br />border:2;</p><p>}<br />div.yy{border:solid 1px;overflow:hidden;}<br />div.yy h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;}</p><p>--></mce:style><style type="text/css" mce_bogus="1"> body {<br />font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;<br />color: #4f6b72;<br />background: #E6EAE9;<br />}<br />td {<br />border-right: 1px solid #C1DAD7;<br />border-bottom: 1px solid #C1DAD7;<br />background: #fff;<br />font-size:11px;<br />padding: 6px 6px 6px 12px;<br />color: #4f6b72;<br />}<br />div{<br />margin-bottom: 0;<br />margin-top: 0;<br />padding-bottom: 0;<br />padding-top: 0;<br />size: 700px;<br />}<br />table{<br />width:700px;<br />padding:0;<br />margin:0;<br />border:2;</p><p>}<br />div.yy{border:solid 1px;overflow:hidden;}<br />div.yy h5{border:solid 1px;border-width:0 0 1px;padding:0;margin:0;height:30px;line-height:30px;cursor:pointer;background:#eee;}<br /> </style>

 

由於HTML代碼太多就不貼出來了。。。若想要原始碼的麻煩留下郵箱，我看到後會給你發過去。（另外註明：頁面中包含有時間的js代碼以及DIV層的收縮功能）