dom 小应用--活动表格

         这几天在做一个人才网，因为要求职者填写较多的资料，页面撑得很长，很不好看。所以就想，把这些资料分类后，按分类陷藏。然后用js+dom控制这些表格，想显示哪一部分就哪一部分，这样就提高了用户的友好性。
        心动不如行动。如何实现这样的效果呢？

        以前课本上有一个类似的例子，但那个只是简单的给出两个用ID标志的对象，然后用js控制它们的style.display。可是我这里不只两个对象要控制呀，每个都写一个ID然后再用js一个个控制？那样就等着累死吧。可怎么才能方便的实现呢？

       没错，是dom。dom提供了一个树状的结构给我们控制整个页面的对象，非常方便。

      例如：我要点击当前的对象后隐藏下一个对象，那么只需要用dom获取到下一个对象，然后就display="none"就行了。

       那么怎样获取到下一个对象呢？
      在dom中获取对象下一兄弟对象可以这样写
       var next_obj=obj.nextSibling;

    既然我们能获取到对象的下一个对象了，那么，要隐藏它就非常简单了。

      假设当前结构是：


               <table>


                       <tr onclick="show_hidden(this)"> <td></td> </tr><!--触发对象，show_hidden为自定义函数，注意传递的this代表对象本身-->


                       <tr> <td></td> </tr><!--要隐藏对象-->


              </table>

 

    那么要js的show_hidden就可以这样写：


      function show_hidden(obj)




         ...{


            var obj_next=obj.nextSibling;//获取当前对象的下一兄弟结点


            while(obj_next.nodeName=="#text")//排除IE与Firefox对空白结点的差异


                 obj_next=obj_next.nextSibling;


   


            if(obj_next.style.display=="none")


               obj_next.style.display="";


           else


                obj_next.style.display="none";


         }

 

     代码非常简洁，也容易扩展。（呵，，自我吹嘘一下）

     上面的js中要注意排除IE与Firefox的差异。在IE中，空白也会作为一个节点的，但在IE中却会忽略空白的，所以很容易出现在IE中可以正常运行的页面，到了Firefox中就“死”了的现象。为了实现代码的兼容性，我们不得不牺牲点脑细胞了。毕竟不是所有人都是MS的忠实“蕃薯”嘛！