如何在表格內容中制作視圖控制台

Question

我試着像往常一樣在網上制作一個簡單的桌子。 但我不知道如何根據每個表格內容進行編輯和查看其他內容的顯示。

<body>
<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>
</body>

我的概念，當用戶的指針接近1個內容的表時，顯示自動顯示為動作視圖或輸入新數據。 請指教

為exp。 喜歡在視圖gmail web客戶端上。 當用戶游標接近收件箱中的一個名稱發件人電子郵件時，控制台會自動顯示添加聯系人等...但是在gmail中只是為了發件人的名字

Answer 1

您可以通過純javascript或jquery解決您的問題：

JavaScript解決方案

//this function create our layout which will be displayed on mouse over
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.top = parseInt(el.offsetTop)+"px";
div.style.left=parseInt(el.offsetLeft)+parseInt(div.style.width)/4+"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;}};
}

這里我們處理每個td元素上的onmouseover事件，當它發生時 - 顯示可以包含任何HTML代碼的overlay（div）

您還可以為div添加背景，並通過編輯這些行來編輯div的位置

div.style.top = parseInt(el.offsetTop)+"px";
div.style.left=parseInt(el.offsetLeft)+parseInt(div.style.width)/4+"px";

您也可以通過JQuery做這件事，它將減少代碼:)

另外，我建議你閱讀javascript中的事件

干杯。

如何在表格內容中制作視圖控制台

問題描述

1 個解決方案

解決方案1
2 已采納 2013-03-26 08:27:05

如何在表格內容中制作視圖控制台

問題描述

1 個解決方案

解決方案1 2 已采納 2013-03-26 08:27:05

解決方案1
2 已采納 2013-03-26 08:27:05