DIV+Table实现复杂表单

使用jsp页面实现一个报告的录入，由于表单比较复杂，而项目进度又比较紧，所以就没有花时间去研究一些专门做报告的表单工具，凑合着使用DIV+table也算是完成了任务。

页面样例如下图：

 

JavaScript代码如下：

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

 

css代码如下：

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

 

由于HTML代码太多就不贴出来了。。。若想要源代码的麻烦留下邮箱，我看到后会给你发过去。（另外注明：页面中包含有时间的js代码以及DIV层的收缩功能）