文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在表内容中制作视图控制台

问如何在表内容中制作视图控制台
EN

Stack Overflow用户

提问于 2013-03-26 15:11:28

回答 1查看 133关注 0票数 0

我试着像往常一样在我的网页上做一个简单的表格。但是我不知道如何根据每个表的内容来显示编辑和查看另一个内容。

<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.就像on view gmail web client。当用户光标靠近收件箱中的某个发件人姓名时，控制台会自动为发件人姓名在gmail中添加联系人etc..but

html

php

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-03-26 16:27:05

您可以通过纯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事件，当它发生时-显示覆盖( div )，它可以包含任何HTML代码

您还可以添加背景到div，并通过编辑以下行来编辑div的位置

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

你也可以用JQuery来做这件事，而且代码会更少:)

另外，我还建议您阅读javascript中的事件。

干杯。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15631331

复制

相似问题

问如何在表内容中制作视图控制台
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在表内容中制作视图控制台EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在表内容中制作视图控制台
EN