在jsp界面已列出所有客户列表,我想双击任意客户记录时,弹出一个小框,小框内把该客户所有信息以表的形式列出。利用js怎么实现呐??跪求大牛指导,,,,,

解决方案 »

  1.   


    $("td").click(function(){
      var name=$(this).val();
      $("#clientInfo").html("");
      $("#clientInfo").appened("<span>名称:"+name+"</span>")
      $("#clientInfo").show();
    });
    <div id="clientInfo" style="dispaly:none;">
     </div>我只示范了单击名称的单元格并将层弹出将信息写入,有多个信息类似 添加即可。用到 jquery
      

  2.   

    看不太明白,能不能把整个jsp界面代码贴出来呀?,,,小弟感激不尽
      

  3.   


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    function showInfo(id){

    // get the dom
    var column = document.getElementById(id);
    var cells = column.getElementsByTagName("td");

    // define the var to store the value.
    var id = cells.item(0);
    var name = cells.item(1);
    var age = cells.item(2);
    var position = cells.item(3);
    document.getElementById("id").innerHTML = id.innerHTML;
    document.getElementById("name").innerHTML = name.innerHTML;
    document.getElementById("age").innerHTML = age.innerHTML;
    document.getElementById("position").innerHTML = position.innerHTML;
    // the box
    var box = document.getElementById("showBox");
    box.style.left = (document.width - 200)/2 + "px";
    box.style.top = 300;
    box.style.zIndex = "9999";
    box.style.display = "block";
    }
    </script>
    <style type="text/css">
    body{
    padding:0px;
    margin:0px;
    font-size:12px;
    }
    table{
    margin:50px auto 50px auto;
    background:#09F;
    }
    table th{
    text-align:left;
    }
    table td{
    background:#FFF;
    }
    table tr{
    cursor:pointer;
    }
    </style>
    </head><body>
    <table width="300px" cellpadding="1" cellspacing="1">
    <tr>
         <th width="25%">编号</th>
            <th width="25%">姓名</th>
            <th width="25%">年龄</th>
            <th width="25%">职位</th>
        </tr>
        <tr id="cls_1" ondblclick="showInfo('cls_1')">
         <td width="25%">1</td>
            <td width="25%">小王</td>
            <td width="25%">20</td>
            <td width="25%">经理</td>
        </tr>
        <tr id="cls_2" ondblclick="showInfo('cls_2')">
         <td width="25%">2</td>
            <td width="25%">小黄</td>
            <td width="25%">21</td>
            <td width="25%">组员</td>
        </tr>
    </table>
    <div id="showBox" style="position:absolute; background:#FFF;border:1px solid #666; width:200px; display:none;">
    <div style="float:left; width:100%; height:15px;  background:#999;">
         <div style="float:right; padding-right:20px;">
             <a href="javascript:void(0);" style="background:" onclick="javascript:document.getElementById('showBox').style.display = 'none';">关闭</a>
            </div>
        </div>
    <table width="190" style="margin: 0 auto; background:#FFF">
         <tr>
             <td width="50%">编号</td>
                <td id="id"></td>
            </tr>
            <tr>
             <td>姓名</td>
                <td id="name"></td>
            </tr>
            <tr>
             <td>年龄</td>
                <td id="age"></td>
            </tr>
            <tr>
             <td>职业</td>
                <td id="position"></td>
            </tr>
        </table>
    </div>
    </body>
    </html>
      

  4.   

    jquery有个ondlclick()方法(双击),把哪行的id传到后台,查询,显示。