求鼠标滑过控制表格显示和隐藏。

求一段JAVASCRIPT代码来控制表格中的某一行的显示和隐藏，事件描述如下，
当鼠标滑到表格的某一行上，这行下面就插入一行显示出来，当离开那行时，这个插入的行自动隐藏起来不显示。
效果如这个链接http://www.etpass.com/hotel/?union_id=E0100014&channel_id=100&_sv_code=57_371111_12897920

解决方案 »

  1.   

    初学，蛮写一段，用了jQuery<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            table
            {
                border: 1px solid;
            }
            div
            {
                border: 1px dotted;
            }
        </style>    <script type="text/javascript" src="JavaScript/jquery.js"></script>    <script type="text/javascript">
            $(document).ready(function() {
                $("#tblMouse").children().children().each(function() {
                    $(this).mouseover(function() {
                        $("#createTr").remove();
                        var createTr = document.createElement("tr");
                        createTr.id = "createTr";                    $(createTr).insertAfter(this);                    var createTd = document.createElement("td");
                        createTr.appendChild(createTd);                    var createDiv = document.createElement("div");
                        createTd.appendChild(createDiv);                    $(createDiv).text(this.innerHTML);
                        $(createDiv).height(100);
                    });
                });
            });
        </script></head>
    <body>
        <table id="tblMouse">
            <tr style="height: 40px;">
                <td>
                    行1
                </td>
            </tr>
            <tr>
                <td>
                    行2
                </td>
            </tr>
        </table>
    </body>
    </html>
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <style type="text/css">
      #oul {
    list-style-type: none;
    font-size:12px;
    text-align: center;
      }
      li.title {
    line-height:35px;
    height: 35px;
    overflow:hidden;
    width:413px;
    display:block;
      }

      
      .content {
    background:#FFFFFF none repeat scroll 0 0;
    border:1px dashed #CCCCCC;
    clear:both;
    display:block;
    width: 411px;
    height: 70px;
    background-color: #FFFFCC;
    display: none;
      }
      .color {
    background: #EDEDED none repeat scroll 0 0;
      }
      </style>
     </head>
     <script type="text/javascript">
     <!--
    var $ = function(id){ return document.getElementById(id)};
    var $$ = function(o,tag) { return (o || document).getElementsByTagName(tag)};
    var forEach = function(array, callback, thisObject){
    if(array.forEach){
    array.forEach(callback, thisObject);
    }else{
    for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }
    }
    }
    function extendContent(obj){
    var ocontent = obj.nextSibling;
    while(ocontent.nodeType != 1){
    ocontent = ocontent.nextSibling;
    }
    ocontent.style.display = "block";
    } function bindEvent(){
    var oli = $$($('oul'),'li');
    forEach(oli, function(o){
    if(o.className.indexOf('title')!=-1){
    o.onmouseover = function(){
    forEach(oli, function(o){
    (o.className.indexOf('content')!=-1) && (o.style.display = "none");
    })
    extendContent(this);
    }
    }
    })
    } window.onload = function(){
    bindEvent();
    } //-->
     </script> <body>
      <ul id="oul">
    <li class="title color">东方晨光旅店</li>
    <li class="content">1</li>
    <li class="title">北京红墙饭店</li>
    <li class="content">2</li>
    <li class="title color">青岛新天桥宾馆</li>
    <li class="content">3</li>
      </ul>
     </body>
    </html>
      

  3.   

    学习了，不过直接在tr里面写上onmouseover也可以的啊，没必要用JavaScript的。
      

  4.   

    谢谢s_liangchao1s，我在<li></li>插入表格也可以，请问能不能直接用表格控制，不用层控制呀？
      

  5.   

    那个网站..我怎么看都像 li标签 在隐藏或显示 div下面的是实现tr 实现隐藏或显示,看能不能帮到你
    <html>
    <head>
    <script>
    var $=function(id){return document.getElementById(id);}
    </script>
    </head>
    <body>
    <table width="150px" border="1">
    <tr onmouseover="$('t2').style.display=''" onmouseout="$('t2').style.display='none'"><td>鼠标移到这上面来</td></tr>

    <tr id="t2" style="display:none;"><td>这是隐藏的一行</td></tr>

    </table>
    </body>
    </html>
      

  6.   

    谢谢大家，我觉得DIV里面加TABLE比较好用  我就是这样实现的