<a href="#" onclick="javascript:showTaskDet('<b:write iterateId="id1" property="taskno"/>');"><b:write iterateId="id1" property="taskName"/></a>
              </td>
              <td align="center">
                <b:write iterateId="id1" property="projectName"/>
              </td>
              <td align="center">
                <b:write iterateId="id1" property="modName"/>
              </td>
              <td align="center">
                <b:write iterateId="id1" property="taskRate"/>
                <l:notEmpty iterateId="id1" property="taskRate">
                 %
                </l:notEmpty>
              </td>
              <td align="center">
                <b:write iterateId="id1" property="planPres"/>
              </td>
              <td align="center">
                <b:write iterateId="id1" property="auditorName"/>
              </td>
              <td align="center">
                <b:write iterateId="id1" property="proStarDate" formatPattern="yyyy-MM-dd"/>
              </td>
              <td align="center">
                <b:write iterateId="id1" property="proEndDate" formatPattern="yyyy-MM-dd"/>
              </td>
               <td align="center">
                <b:write iterateId="id1" property="taskStatus"/>
              </td>     
              <td align="center">
                <b:write iterateId="id1" property="actorRated"/>
              </td>
              <td align="center">
                <b:write iterateId="id1" property="actorDate" formatPattern="yyyy-MM-dd"/>
              </td>
              <td align="center">
                <b:write iterateId="id1" property="reason"/>
              </td>
              <td align="center">
                <b:write iterateId="id1" property="auditRate"/>
              </td>
               <td align="center">
                <b:write iterateId="id1" property="comDate" formatPattern="yyyy-MM-dd"/>
              </td>
              <td align="center">
               <%
                if(temp<0){
                 out.print("滞后"+Math.abs(temp)+"天");
                }else if(temp>0 && ((DataObject)pageContext.getAttribute("id1")).getString("taskStatus").equals("完成")){
                 out.print("提前"+temp+"天");
                }
                %>
              </td>
            </tr>
          </l:iterate>
        </w:checkGroup>
        <tr>
          <td colspan="16" class="command_sort_area">
           <div id="pageroot" align="right">
              <l:equal property="page/isCount" targetValue="true">
                共
                <b:write property="page/count"/>
                条记录 第
                <b:write property="page/currentPage"/>
                页/
                <b:write property="page/totalPage"/>
                页
              </l:equal>
              <l:equal property="page/isCount" targetValue="false">
                第
                <b:write property="page/currentPage"/>
                页
              </l:equal>
              <input type="button" onclick="firstPage('page', 'pageQuery', null, null, 'page_form');" value="首页"  <l:equal property="page/isFirst" targetValue="true">disabled</l:equal> >
              <input type="button" onclick="prevPage('page', 'pageQuery', null, null, 'page_form');" value="上页" <l:equal property="page/isFirst" targetValue="true">disabled</l:equal> >
              <input type="button" onclick="nextPage('page', 'pageQuery', null, null, 'page_form');" value="下页" <l:equal property="page/isLast" targetValue="true">disabled</l:equal> >
              <l:equal property="page/isCount" targetValue="true">
                <input type="button" onclick="lastPage('page', 'pageQuery', null, null, 'page_form');" value="尾页" <l:equal property="page/isLast" targetValue="true">disabled</l:equal> >
              </l:equal>
            </div>
          </td>
        </tr>
      </table>
    </w:panel>
  </h:form>
</viewlist>

<script> 
var jquery = jQuery.noConflict();
    //主结点展开/收起
    function node_click(taskid){
       var el=jquery("#"+taskid).find("img")[0]//event.srcElement
       var path=el.src.substr(el.src.lastIndexOf("/")+1)
       var prifix=el.src.substr(0,el.src.lastIndexOf("/"))
       if(path=="grouppanel_open.gif"){
          //显示结点
          var tr=jquery(el).closest("tr");
          if(jquery(el).closest("tr").next().css("display")=="none"){
            el.src=prifix+"/grouppanel_close.gif";
            tr.nextAll("tr[paraTaskno='"+tr.attr("id")+"']").show();
          }else{
            readchildnodeByAjax(taskid);
            jquery(el).trigger("click");
          }
         
       }else{
          //隐藏结点
          el.src=prifix+"/grouppanel_open.gif";
          var tr=jquery(el).closest("tr");
          recursion_node(tr,false);
       }
    }
   
    //ajax读取子结点
    function readchildnodeByAjax(taskid){
       var myAjax=new Ajax("com.bos.mp.projectfollow.mpprojectfollowbiz.QueryTask.biz");
       myAjax.addParam("criteria/_entity","com.bos.mp.projectfollow.dataset.ProTaskQryEntity");
       myAjax.addParam("criteria/_expr[0]/paraTaskno",taskid);
       myAjax.submit();
       //获取"root/data/mpprojectfollows"结点数组
       var nodes=myAjax.getXMLDom().selectNodes("root/data/mpprojectfollows");
       for(var i=0;i<nodes.length;i++){
          addElement(jquery("#"+taskid),nodes[i]);
       }
    }
   
    /**
     *动态增加tr结点,以请求的服务端数据来遍历添加结点
     *template:html页面元素;node:服务端数据子实体
     */
    function addElement(template,node){
      var xml=jquery(node);
      var template=addnode(template,xml)
      var childnodes=xml.children("childTasks");
      for(var i=0;i<childnodes.length&&jquery(xml.children("childTasks")[i]).text()!="";i++){
          addElement(template,xml.children("childTasks")[i]);
      }
    }
    
    /**
     *以服务端的子实体对象(xml)构造一个结点添加到html元素(template)
     */
    function addnode(template,xml){
           var open_gif='<%=request.getContextPath() %>/common/skins/default/images/grouppanel/grouppanel_open.gif';
           var close_gif="<%=request.getContextPath() %>/common/skins/default/images/grouppanel/grouppanel_close.gif"
           //从模板结点构造出目标结点tr
           var curtr=template.clone().insertAfter(template).hide()
                .attr("id",jquery(xml.find("taskno")[0]).text())
                .attr("paraTaskno",jquery(xml.find("paraTaskno")[0]).text());
           //首个TD结点     
           var firsttd=jquery(curtr.children("td")[0]);
           var td=jquery(curtr.children("td")[0]).css("padding-left",parseInt(firsttd.css("padding-left"))+10+"px")
               .empty();
               jquery("<a href='#'></a>").text(jquery(xml.find("taskName")[0]).text())
               .bind("click",function(){
                                showTaskDet(jquery(xml.find("taskno")[0]).text());
                             }).appendTo(td);
           var img=jquery("<img/>").prependTo(td);
           if(jquery(xml.children("childTasks")[0]).text()!=""){
              //非叶子结点,绑定事件
              img.attr("src",open_gif);
              img.bind("click",function(){
                                  var path=jquery(this).attr("src");
                                  var tr=jquery(this).closest("tr");
                                  if(path==open_gif){
                                     jquery(this).attr("src",close_gif);
                                     recursion_node(tr,true);
                                  }else{
                                     jquery(this).attr("src",open_gif);
                                     recursion_node(tr,false);
                                  }
                                 })
            }else{
              //叶子结点
              img.attr("src",close_gif);
            }
            td.next().empty()//text(jquery(xml.find("projectName")[0]).text())
            .next().empty()//text(jquery(xml.find("modName")[0]).text())
            .next().text(jquery(xml.find("taskRate")[0]).text())
            .next().text(jquery(xml.find("planPres")[0]).text())
            .next().text(jquery(xml.find("auditorName")[0]).text())
            .next().text(jquery(xml.find("proStarDate")[0]).text())
            .next().text(jquery(xml.find("proEndDate")[0]).text())
            .next().text(jquery(xml.find("taskStatus")[0]).text())
            .next().text(jquery(xml.find("actorRated")[0]).text())
            .next().text(jquery(xml.find("actorDate")[0]).text())
            .next().text(jquery(xml.find("reason")[0]).text())
            .next().text(jquery(xml.find("auditRate")[0]).text())
            .next().text(jquery(xml.find("comDate")[0]).text())
            .next().text("");
            return curtr;
      }
   
    /**
     *层叠递归方式显示或隐藏结点
     * node:jquery对象;isshow:boolean值
     */
    function recursion_node(node,isshow){
      var open_gif='<%=request.getContextPath() %>/common/skins/default/images/grouppanel/grouppanel_open.gif';
      var close_gif="<%=request.getContextPath() %>/common/skins/default/images/grouppanel/grouppanel_close.gif"
      var nodes=node.nextAll("tr[paraTaskno='"+node.attr("id")+"']")

      for(var i=0;i<nodes.length;i++){
          recursion_node(jquery(nodes[i]),isshow);
          if(!isshow){
            jquery(nodes[i]).hide();
          }else{
           jquery(nodes[i]).show();
          }
      }
      if(nodes.length>0){
      jquery(node.find("img")[0]).attr("src",!isshow?open_gif:close_gif)
      }

    }

var j = jQuery.noConflict();
// 基于 jQuery 的代码
j("div p").hide();
// 基于其他库的 $() 代码
$("content").style.display = 'none';

if(window.event) // IE
  {
  keynum = e.keyCode
  }
else if(e.which) // Netscape/Firefox/Opera
  {
  keynum = e.which
  }
keychar = String.fromCharCode(keynum)
numcheck = /^(0|[1-9]\d*)$/
return numcheck.test(keychar)
}

 
</script>

alert("删除了第六个元素！"+b)
}
</script>

Omar AL Zabir这位MVP总是喜欢搞些稀奇古怪同时又很实用的小东西，并且还十分值得参考。最近他就做了一个叫做ensure的小工具用于动态加载JavaScript、CSS与HTML，而且IE、Firefox、Opera、Safari都支持了，那么我们就来看看ensure是如何做到动态加载JavaScript与CSS的。

在介绍ensure内部的实现之前，让我们先来看看其功能：

ensure({
    html: "popup.html",
    javascript: "popup.js",
    css: "popup.css"
  }, function() {
    Popup.show("hello world");
  }
);

在这段代码中，ensure首先会确保popup.html、popup.js、popup.css这3个文件的加载，如果都没加载过ensure 就会动态加载它们；如果已经加载过了，ensure不会再次加载。在确保这3个文件都加载后，ensure会调用后面的匿名函数，也就是执行 Popup.show("hello world");。

接下来，就让我们看看ensure是如何动态加载JavaScript与CSS的。

加载JavaScript

在ensure当中，加载JavaScript分两种情况来执行，也就是Safari与非Safari这两种情况。

在IE、Firefox、Opera中加载JavaScript

在这三款浏览器中加载JavaScript，其实只需要创建一个script元素，把src指向要加载的URL，最后把script元素追加到head元素上，那就搞掂了。此项工作是在HttpLibrary.createScriptTag()中完成的。不过我们不仅仅要加载JavaScript，同时还需要知道它什么时候完成加载，这可以通过script元素的onload事件或onreadystatechange事件来实现。

在Safari中加载JavaScript

因为Safari 2不支持onload或者onreadystatechange，所以只能手动通过XHR把URL读去过来，然后再手动eval这段代码，这就带来了一个限制──只能加载本域的JavaScript文件。在ensure当中，eval的工作是通过HttpLibrary.globalEval()来完成的。为了让JavaScript代码在全局（global）上下文中eval，ensure还是使用了创建script元素的方法，并将要eval的JavaScript置于其内，最后把script元素追加到head元素内。

细心的人肯定要问，为什么HttpLibrary.globalEval()要如此设计，而非直接window.eval或者eval.call。这是因为，window.eval和eval.call都无法在IE6中实现和script标签加载JavaScript代码一模一样的效果，这两种做法的eval在IE6下仍然不是在全局上下文中执行的。搜索一下你就会发现一些相关的讨论，例如jQuery就曾经使用window.execScript()来完成此项任务。不过最终大家都发现添加script元素才是最好的跨浏览器解决方案，所以现在的jQuery和ensure都是如此实现的了。

加载CSS

相对于加载JavaScript而言，加载CSS就简单多了，而且方法也是类似的：在head元素内直接加入link元素就可以了。这也正是loadCSS()所完成的工作。

实际上，ensure没有确保CSS完成加载后再执行下去。这估计是因为浏览器都能够在CSS加载完成后自动应用到页面上，因此Omar AL Zabir就认为CSS的加载顺序是无关紧要的，不过假如CSS加载速度实在太慢，其实还是会影响显示效果的。

在IE6中加载CSS

这次需要特别照顾的是IE6，而非Safari。IE6在往head元素添加link元素时，必须在window的上下文中完成，因此添加link的函数通过call调用切换了上下文。

总结

实际上动态加载JavaScript与CSS都并不难，在大多数情况下只需要向head元素追加对应的子元素就可以了，只有Safari2和IE6这两款古老的浏览器是需要特殊照顾的。

以下为浏览器firefox,ie默认设置：

table {
display: table;
border-spacing: 2px;             /*border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。*/

border-collapse: separate;       /* 除非 border-collapse 被设置为 separate，否则将忽略这个属性。 */
margin-top: 0;
margin-bottom: 0;
text-indent: 0;
}

h6 {display: block;font-size: 0.67em;font-weight: bold;margin: 2.33em 0;}

*************************************************************************************
table {
display: table;
border-spacing: 2px;             /*border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。*/

border-collapse: separate;       /* 除非 border-collapse 被设置为 separate，否则将忽略这个属性。 */
margin-top: 0;
margin-bottom: 0;
text-indent: 0;
}
td {display:table-cell;padding:1px;text-align:inherit;vertical-align:inherit;} 

 firefox ie 浏览器默认值(1em=16px)

（1）

ul{padding-left:40px;margin:1em 0;}   /* ul 标签上下外间距为16px;左内间距为40px; */
p,dl{margin:1em 0;}                           /* p,dl 标签上下外间距为16px; */
dd{margin-left:40px;}                         /* dd 标签左外间距为40px; */
firefox: ul dl,dl ul,.....{margin-top:0;margin-bottom:0;} /* 列表嵌套，IE中列表嵌套不设置此属性，依然是margin:1em 0; */  

<ul>，<dl> 列表标签一般不设置背景图片等样式，只设置margin,padding边距属性，样式属性只在<li>，<dt>，<dd>等设置。
表格里的<td>内部不需在添加块框，即添加背景只接用<td>样式即可。

2）IE中任何元素最小高度规定为19px，不可更改。解决方法：设置高度为19px以下的元素需指定overflow:hidden属性，间接的解决问题。

3) IE7中 <li> 最低高度为19px.

代码很简单，a层为内容层，其width值300，然后用b层向外以左右边框2像素（可任意）的宽度递减。最外一层要加上background属性，目的是要将上、下两线条呈现出来；b层的数量决定了要实现的圆角弧度大小。在firefox IE6 都通过测试。

</div>
<div class="b" style="margin-left:1px;width:298px"></div>
<div class="b" style="margin-left:2px;width:296px;"></div>
<div class="b" style="margin-left:3px;width:294px;background:#333"></div>
</div>
</body>
</html>