爲什麼沒有在我的瀏覽器

-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=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>

當我嘗試在這裏演示它http://jsfiddle.net/andricoga/yTj8K/的工作。但是當我在本地主機上嘗試時，只是顯示一張表格而沒有改變。我的Java腳本不起作用。任何想法是什麼問題。請指教

來源

2013-03-27 Andriansyah

「不工作」是一個足夠的問題描述。 – 2013-03-27 04:11:03

把JavaScript代碼放在head標籤裏 – Gopesh 2013-03-27 04:14:46

有一天我希望它可以 – 2013-03-27 04:19:57

你需要檢查DOM是執行之前加載：

//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; 
     } 
    }; 
}

要不就是onload事件之後執行。或者在你的<table>被渲染後移動腳本的這部分。

您可以使用jQuery $(document).ready(function() { ... });。或者非jQuery解決方案，請參閱：Dom loaded event cross borwser native javascript code

它在jsfiddle中工作，因爲腳本被指定爲執行onload。

來源

2013-03-27 04:15:47 sweetamylase

爲什麼沒有在我的瀏覽器

回答

相關問題