本文介绍了一个使用HTML和JavaScript实现的表格操作案例，包括如何通过JavaScript获取被点击单元格的内容及其位置，并展示了如何动态创建和移除div元素来显示提示信息。
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#tipDiv{
position:absolute;
left:512px;
top:582px;
width:191px;
height:91px;
z-index:3;
display:none;
background-color: #FF9933;
}
#tipLayer {
position:absolute;
width:167px;
height:94px;
left:50px;
top:50px;
z-index:1;
background-color: #33FF99;
border:solid;
border-width:thin;
padding:10px;
border-color:a;
width:300px;
height:200px;
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 132px;
top: 36px;
}
</style>
<script type="text/javascript" language="javascript">
function checkTr(){
var td = event.target; // 通过event.srcElement 获取激活事件的对象 td
alert("行号：" + (td.parentElement.rowIndex + 1) + "，内容：" + td.innerText);
var tab = document.getElementById("test") ;
//表格行数
var rows = tab.rows.length ;
//表格列数
var cells = tab.rows.item(0).cells.length ;
alert("行数"+rows+"列数"+cells);
}
var removeTime;
window.onload = function(){
document.getElementById("test").onclick=function(evt){
test(evt);
}
}
function test(evt){
removeDiv();
//alert(document.body.clientWidth);
//alert(document.body.clientHeight);
//alert(document.documentElement.clientWidth);
//alert(document.documentElement.clientHeight);
window.clearTimeout(removeTime) ;//清除计时器
//动态创建div
var testDiv=document.createElement("div");
testDiv.setAttribute("id","tipLayer");
testDiv.setAttribute("position","absolute");
testDiv.innerHTML="撒打扫打扫打扫打扫打扫";
if(evt==null){
evt=window.event;
}
var obj=evt.srcElement?evt.srcElement:evt.target
testDiv.style.left=evt.layerX+"px";
testDiv.style.top= evt.layerY+"px";
//testDiv.style.left=document.documentElement.scrollLeft+obj.pageX;
//testDiv.style.top=document.documentElement.scrollTop+obj.clientY;
testDiv.style.width="200px";
testDiv.style.height="200px";
testDiv.style.cursor="pointer";
testDiv.style.color="red";
testDiv.setAttribute("background-color","blue");
document.body.appendChild(testDiv);
removeTime=setTimeout("removeDiv()",3000);//3秒
}
//移除div的方法
function removeDiv(){
if(document.getElementById("tipLayer")!=null){
var divobj=document.getElementById("tipLayer");
divobj.parentNode.removeChild(divobj);
}
}
function browserType() { //判断浏览器类型
if (navigator.userAgent.indexOf("MSIE") > 0) {
return 'IE';
} else if (navigator.userAgent.indexOf("Firefox") > 0) {
return 'FF';
} else if (navigator.userAgent.indexOf("Safari") > 0) {
return 'SF';
}
}
</script>
</head>
<body>
<div id="Layer1">
<div align="center" >sdsdsdsd</div>
</div>
<div style="left:200px; top:200; background-color:#CC3399; background-color:#66CC99; border:#000066; border:solid; border-width:thin; border:#336633; padding:1px">xxxxxxxxxxxxxxxxxxxxx</div>
<table id="test" name="tab" border="1" width="4000px">
<TR>
<td>张三</td>
<td>16</td>
</TR>
<TR>
<td>李四</td>
<td>17</td>
</TR>
<TR>
<td>王五</td>
<td>18</td>
</TR>
<TR>
<td>张三</td>
<td>16</td>
</TR>
<TR>
<td>李四</td>
<td>17</td>
</TR>
<TR>
<td>王五</td>
<td>18</td>
</TR>
<TR>
<td>张三</td>
<td>16</td>
</TR>
<TR>
<td>李四</td>
<td>17</td>
</TR>
<TR>
<td>王五</td>
<td>18</td>
</TR>
<TR>
<td>张三</td>
<td>16</td>
</TR>
<TR>
<td>李四</td>
<td>17</td>
</TR>
<TR>
<td>王五</td>
<td>18</td>
</TR>
</table>
</body>
</html>
扫一扫
1883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
