doufendi9063 2013-03-27 04:08
浏览 24
已采纳

为什么我的覆盖功能在我的浏览器中不起作用

i use a google chrome as my browser and this my web page source

<!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=iso-8859-1" />
</head>

<script type="text/javascript">
function createOverlay() {
    var div = document.createElement("div");
    div.innerHTML = "your own code here";
    div.id = "overlay";
    div.display = "none";
    div.style.position = "absolute";
    div.style.border = "1px solid";
    document.body.appendChild(div);
}

//this function show layout
function showOverlay(el) {
    if (!document.getElementById("overlay")) createOverlay();
    var div = document.getElementById("overlay");
    div.style.display = "block";
    div.style.width = "200px";
    div.style.height = "200px";
    div.style.backgroundColor="FFFF"
    div.style.top = el.offsetTop + 40 + "px";
    div.style.left = parseInt(el.offsetLeft) + parseInt(div.style.width) / 2 + "px";
    div.onmouseover = function (event) {
        event.stopPropagation();
        return false;
    };
}

// and this function hide - you can use it for "close" button on overlay
function hideOverlay() {
    document.getElementById("overlay").style.display = "none";
}

//here is the code which add event handlers to td elements of your table
var table = document.getElementsByTagName("table")[0];
var tds = table.getElementsByTagName("td");
var flag = true;
if (document.getElementById("overlay")) {
    if (document.getElementById("overlay").style.display != "none") flag = false;
}
for (i in tds) {
    tds[i].onmouseover = function (event) {
        if (flag) {
            showOverlay(this);
            event.stopPropagation();
        } else {
            return false;
        }
    };
}
</script>
<body>
<div>
<table width="1023" height="248" border="1">
  <tr>
    <th colspan="2" scope="col">A1</th>
    <th colspan="2" scope="col">A2</th>
    <th colspan="2" scope="col">A3</th>
    <th colspan="2" scope="col">A4</th>
    <th colspan="2" scope="col">A5</th>
    <th colspan="2" scope="col">A6</th>
    <th colspan="2" scope="col">A7</th>
    <th colspan="2" scope="col">A8</th>
    <th colspan="2" scope="col">A9</th>
  </tr>
  <tr>
    <td><div align="center">A1.4</div></td>
    <td><div align="center">A1.8</div></td>
    <td><div align="center">A2.4</div></td>
    <td><div align="center">A2.8</div></td>
    <td><div align="center">A3.4</div></td>
    <td><div align="center">A3.8</div></td>
    <td><div align="center">A4.4</div></td>
    <td><div align="center">A4.8</div></td>
    <td><div align="center">A5.4</div></td>
    <td><div align="center">A5.8</div></td>
    <td><div align="center">A6.4</div></td>
    <td><div align="center">A6.8</div></td>
    <td><div align="center">A7.4</div></td>
    <td><div align="center">A7.8</div></td>
    <td><div align="center">A8.4</div></td>
    <td><div align="center">A8.8</div></td>
    <td><div align="center">A9.4</div></td>
    <td><div align="center">A9.8</div></td>
  </tr>
  <tr>
    <td><div align="center">A1.3</div></td>
    <td><div align="center">A1.7</div></td>
    <td><div align="center">A2.3</div></td>
    <td><div align="center">A2.7</div></td>
    <td><div align="center">A3.3</div></td>
    <td><div align="center">A3.7</div></td>
    <td><div align="center">A4.3</div></td>
    <td><div align="center">A4.7</div></td>
    <td><div align="center">A5.3</div></td>
    <td><div align="center">A5.7</div></td>
    <td><div align="center">A6.3
    </div>
    <div align="center"></div></td>
    <td><div align="center">A6.7</div></td>
    <td><div align="center">A7.3</div></td>
    <td><div align="center">A7.7</div></td>
    <td><div align="center">A8.3</div></td>
    <td><div align="center">A8.7</div></td>
    <td><div align="center">A9.3</div></td>
    <td><div align="center">A9.7</div></td>
  </tr>
  <tr>
    <td><div align="center">A1.2</div></td>
    <td><div align="center">A1.6</div></td>
    <td><div align="center">A2.2</div></td>
    <td><div align="center">A2.6</div></td>
    <td><div align="center">A3.2</div></td>
    <td><div align="center">A3.6</div></td>
    <td><div align="center">A4.2</div></td>
    <td><div align="center">A4.6</div></td>
    <td><div align="center">A5.2</div></td>
    <td><div align="center">A5.6</div></td>
    <td><div align="center">A6.2</div></td>
    <td><div align="center">A6.6</div></td>
    <td><div align="center">A7.2</div></td>
    <td><div align="center">A7.6</div></td>
    <td><div align="center">A8.2</div></td>
    <td><div align="center">A8.6</div></td>
    <td><div align="center">A9.2</div></td>
    <td><div align="center">A9.6</div></td>
  </tr>
  <tr>
    <td><div align="center">A1.1</div></td>
    <td><div align="center">A1.5</div></td>
    <td><div align="center">A2.1</div></td>
    <td><div align="center">A2.5</div></td>
    <td><div align="center">A3.1</div></td>
    <td><div align="center">A3.5</div></td>
    <td><div align="center">A4.1</div></td>
    <td><div align="center">A4.5</div></td>
    <td><div align="center">A5.1</div></td>
    <td><div align="center">A5.5</div></td>
    <td><div align="center">A6.1</div></td>
    <td><div align="center">A6.5</div></td>
    <td><div align="center">A7.1</div></td>
    <td><div align="center">A7.5</div></td>
    <td><div align="center">A8.1</div></td>
    <td><div align="center">A8.5</div></td>
    <td><div align="center">A9.1</div></td>
    <td><div align="center">A9.5</div></td>
  </tr>
</table>
</div>
</body>
</html>

when i try that in demo here http://jsfiddle.net/andricoga/yTj8K/ it's work. But when I try that in local host nothing change just a table shown. my java script doesn't work. any idea what the problem. please advise

  • 写回答

1条回答 默认 最新

  • dongzhong7299 2013-03-27 04:15
    关注

    You need to check that the DOM is loaded before executing:

    //here is the code which add event handlers to td elements of your table
var table = document.getElementsByTagName("table")[0];
var tds = table.getElementsByTagName("td");
var flag = true;
if (document.getElementById("overlay")) {
    if (document.getElementById("overlay").style.display != "none") flag = false;
}
for (i in tds) {
    tds[i].onmouseover = function (event) {
        if (flag) {
            showOverlay(this);
            event.stopPropagation();
        } else {
            return false;
        }
    };
}

    So either execute it after the onload event. Or move this part of the script so it comes after your <table> is rendered.

    You can use jQuery $(document).ready(function() { ... });. Or a non-jQuery solution, see: Dom loaded event cross borwser native javascript code

    It works in the jsfiddle because the script is specified to execute onload.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器