我尝试像平常一样在我的网络中制作一个简单的表格。但我不知道如何根据每个表格内容进行显示以进行编辑和查看其他内容。
<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个内容时，会自动显示该内容以进行操作查看或输入新数据。请指教
对于经验。就像查看 Gmail 网络客户端一样。当用户光标靠近收件箱中的发件人电子邮件名称之一时，控制台会自动显示以添加联系人等。但在 gmail 中仅显示发件人姓名
最佳答案
您可以通过纯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 代码的覆盖层 ( div )
您还可以为 div 添加背景，并通过编辑此行来编辑 div 的位置
div.style.top = parseInt(el.offsetTop)+"px";
div.style.left=parseInt(el.offsetLeft)+parseInt(div.style.width)/4+"px";
您也可以通过 JQuery 完成此操作，并且代码会更少:)
我还建议您阅读有关 javascript 中的事件
干杯。
关于php - 如何在表格内容中创建 View 控制台，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15631331/