JavaScript控件问题~请高手回答

想实现一个功能，比如：一个数字党鼠标移到它上面的时候出现一个类似日期控件的一个表格~表格大小随便~但是在表格的任意一个格子里面有这个数字的值~~求解决

解决方案 »

  1.   

    这个很简单，给你个思路：
    如果你的每一个数字都是在一个div里的，那么为每一个div都注册一个mouseover事件，具体的写法如下：document.getElementById("num1").onmouseover = function(){
        var num = document.getElementById("num1").innerHTML;
        var table = "<table>"
        for(var i = 0;i < 5;i++){
            table += "<tr>"
            for(var j = 0;j < 5;j++){
                table += "<td style=\"width:20px;height:20px\">" + num + "</td>"
            }
            table += "</tr>";
        }
        table += "</table>";
        var oDiv = document.createElement("DIV");
        var env = window.event || arguments[0];
        var style = "position:absolute;left:" + env.x + "px;top:" + env.y + "px;width:100px;height:100px;";
        oDiv.setAttribute("style",style);
        oDiv.innerHTML = table;
        document.body.appendChild(oDiv);
    };
      

  2.   

    来吧，楼主，我给你弄了一个例子，你贴过去看看<html>
    <div style="width:100px;height:20px;border:1px solid black;margin:10px;" id="num1">1</div>
    <div style="width:100px;height:20px;border:1px solid black;margin:10px;" id="num2">2</div>
    <div style="width:100px;height:20px;border:1px solid black;margin:10px;" id="num3">3</div>
    <div style="width:100px;height:20px;border:1px solid black;margin:10px;" id="num4">4</div>
    <script type="text/javascript">
    var over = function(divID){
        return function(){
            var oDiv = document.getElementById("x_" + divID);
            if(oDiv){
                oDiv.style.display = "block";
        return;
            }
            var num = document.getElementById(divID).innerHTML;
            var table = "<table style=\"border:1px solid red\">"
            for(var i = 0;i < 5;i++){
                table += "<tr>"
                for(var j = 0;j < 5;j++){
                    table += "<td style=\"width:20px;height:20px\">" + num + "</td>"
                }
                table += "</tr>";
            }
            table += "</table>";
            var oDiv = document.createElement("DIV");
            oDiv.id = "x_" + divID;
            var env = window.event || arguments[0];
            var style = "position:absolute;left:" + env.x + "px;top:" + env.y + "px;width:100px;height:100px;";
            oDiv.setAttribute("style",style);
            oDiv.innerHTML = table;
            document.body.appendChild(oDiv);
        };};
    var out = function(divID){
        return function(){
            var oDiv = document.getElementById("x_" + divID);
            if(oDiv){
                oDiv.style.display = "none";
            }
        };
    };document.getElementById("num1").onmouseover = over("num1");
    document.getElementById("num1").onmouseout = out("num1");document.getElementById("num2").onmouseover = over("num2");
    document.getElementById("num2").onmouseout = out("num2");document.getElementById("num3").onmouseover = over("num3");
    document.getElementById("num3").onmouseout = out("num3");document.getElementById("num4").onmouseover = over("num4");
    document.getElementById("num4").onmouseout = out("num4");</script>
    </html>