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

Question

i try to make a simple table in my web like usually. 我试着像往常一样在网上制作一个简单的桌子。 but i have no idea how to make a display for edit and view another content according to this each table content. 但我不知道如何根据每个表格内容进行编辑和查看其他内容的显示。

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

my concept, when the pointer of user close to 1 content of table, the display automaticlly shown for act view or input new data. 我的概念，当用户的指针接近1个内容的表时，显示自动显示为动作视图或输入新数据。 Please advice 请指教

for exp. 为exp。 like on view gmail web client. 喜欢在视图gmail web客户端上。 when user cursore close to one of name sender email in inbox, the console automaticly shown for add contact etc..but in gmail just for the name of sender 当用户游标接近收件箱中的一个名称发件人电子邮件时，控制台会自动显示添加联系人等...但是在gmail中只是为了发件人的名字

Answer 1

You can solve your problem by pure javascript or jquery : 您可以通过纯javascript或jquery解决您的问题：

javascript solution 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;}};
}

Here we handle the onmouseover event on each td element and when it happens - show the overlay ( div ) which can contain any HTML code 这里我们处理每个td元素上的onmouseover事件，当它发生时 - 显示可以包含任何HTML代码的overlay（div）

Also you can add background to div, and edit position of div by editing this lines 您还可以为div添加背景，并通过编辑这些行来编辑div的位置

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

You can also do this thing by JQuery and it will be less code :) 您也可以通过JQuery做这件事，它将减少代码:)

Also i recommend you to read about events in javascript 另外，我建议你阅读javascript中的事件

Cheers. 干杯。

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

问题描述

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