一个点击表格,单出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").οnclick=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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值