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层的收缩功能）