动态淡出表格行,鼠标悬浮提示框

最新推荐文章于 2023-01-12 11:15:09 发布

shihuan830619

最新推荐文章于 2023-01-12 11:15:09 发布

阅读量291

点赞数

分类专栏： html 文章标签： html table JavaScript ViewUI

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏


<html>
<head>
<title>动态淡出表格行,鼠标悬浮提示框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<style type="text/css">
.mytable table{border-right:1px solid #000000; border-bottom:1px solid #000000}
.mytable table th{border-left:1px solid #000000; border-top:1px solid #000000; background-color:#0099cc}
.mytable table td{border-left:1px solid #000000; border-top:1px solid #000000;}
</style>

<script type="text/javascript">
document.write("<div id=\"ts\" style=\"position:absolute; background-color:#FFFFE6; font-size:12px; padding:3px; border:1px solid #FFCC99; display:none\"></div>");

$(function(){
	//setInterval(executeAnimation, 3000);  //3秒执行一次
});

function executeAnimation(){
	var trcontent = "";
	trcontent += "<tr onmouseover='mtrmove(this);' onmouseout='mtrout();' align='center'>"
	trcontent += "<td>100</td>";
	trcontent += "<td>新来的</td>";
	trcontent += "<td>2014</td>";
	trcontent += "</tr>";

	$("table tr").eq(10).fadeOut("slow", function(){
		$("table tr").eq(10).remove(); //删除当前行
		$("#mytb").prepend(trcontent);
	});
}

function mtrmove(obj,s){
    var evt = event || window.event;
    var x = evt.clientX - 75;
    var y = evt.clientY - 20;
    document.getElementById("ts").style.left = x + 'px';
    document.getElementById("ts").style.top = y + 'px';
    if(s=='' || typeof(s)=='undefined'){
        document.getElementById("ts").innerHTML = obj.innerHTML;
		//document.getElementById("ts").innerHTML = "aaaaaaaaaaaaaaaaaaaaaaaaaa;<br /> bbbbbbbbbbbbbbbbbbbbbbbbb;<br /> ccccccccccccccccccc";
    }else{
        document.getElementById("ts").innerHTML = s;
    }
    document.getElementById("ts").style.display = '';
}

function mtrout(){
    document.getElementById("ts").style.display = 'none';
}

</script>
</head>
<body>
	<div class="mytable" align="center">
		<table border="0" cellpadding="0" cellspacing="0" width="60%">
			<tr>
				<th>ID</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tbody id="mytb">
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>1</td>
					<td>张三</td>
					<td>18</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>2</td>
					<td>李四</td>
					<td>19</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>3</td>
					<td>王五</td>
					<td>21</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>4</td>
					<td>赵六</td>
					<td>22</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>5</td>
					<td>孙七</td>
					<td>23</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>6</td>
					<td>刘八</td>
					<td>25</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>7</td>
					<td>周九</td>
					<td>32</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>8</td>
					<td>彭十</td>
					<td>35</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>9</td>
					<td>潼南</td>
					<td>38</td>
				</tr>
				<tr onmouseover="mtrmove(this);" onmouseout="mtrout();" align="center">
					<td>10</td>
					<td>漠北</td>
					<td>46</td>
				</tr>
			</tbody>
		<table>
	</div>
	<input type="button" value="删除行" onclick="executeAnimation();" />
</body>
</html>

鼠标移入移出事件变成单击事件了，鼠标单击其他空白处悬浮框消失:


<html>
<head>
<title>动态淡出表格行,鼠标悬浮提示框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<style type="text/css">
.mytable table{border-right:1px solid #000000; border-bottom:1px solid #000000}
.mytable table th{border-left:1px solid #000000; border-top:1px solid #000000; background-color:#0099cc}
.mytable table td{border-left:1px solid #000000; border-top:1px solid #000000;}
</style>

<script type="text/javascript">
document.write("<div id=\"ts\" style=\"position:absolute; background-color:#FFFFE6; font-size:12px; padding:3px; border:1px solid #FFCC99; display:none\"></div>");

$(function(){
	//setInterval(executeAnimation, 3000);  //3秒执行一次
});

function executeAnimation(){
	var trcontent = "";
	trcontent += "<tr onmouseover='mtrmove(this);' onmouseout='mtrout();' align='center'>"
	trcontent += "<td>100</td>";
	trcontent += "<td>新来的</td>";
	trcontent += "<td>2014</td>";
	trcontent += "</tr>";

	$("table tr").eq(10).fadeOut("slow", function(){
		$("table tr").eq(10).remove(); //删除当前行
		$("#mytb").prepend(trcontent);
	});
}

function mtrmove(obj,s){
    var evt = event || window.event;
    var x = evt.clientX - 75;
    var y = evt.clientY - 20;
    document.getElementById("ts").style.left = x + 'px';
    document.getElementById("ts").style.top = y + 'px';
    if(s=='' || typeof(s)=='undefined'){
        document.getElementById("ts").innerHTML = obj.innerHTML;
		//document.getElementById("ts").innerHTML = "aaaaaaaaaaaaaaaaaaaaaaaaaa;<br /> bbbbbbbbbbbbbbbbbbbbbbbbb;<br /> ccccccccccccccccccc";
    }else{
        document.getElementById("ts").innerHTML = s;
    }
    document.getElementById("ts").style.display = '';

	addEvent(document.body,"mousedown",clickOther);
}

function mtrout(){
	var tsobj = document.getElementById("ts");
	delEvent(document.body,"mousedown",mtrmove);
    tsobj.style.display = 'none';
}

function addEvent(obj,eventType,func){
	if(obj.attachEvent){
		obj.attachEvent("on" + eventType,func);
	} else {
		obj.addEventListener(eventType,func,false)
	}
}

function delEvent(obj,eventType,func){
	if(obj.detachEvent){
		obj.detachEvent("on" + eventType,func);
	} else {
		obj.removeEventListener(eventType,func,false);
	}
}

function clickOther(el){
	thisObj = el.target ? el.target : event.srcElement;
	//alert(thisObj.tagName== "BODY")
	do{
		if(thisObj.id == "ts") return;
		if(thisObj.tagName == "BODY"){
			mtrout();
			return;
		};
		thisObj = thisObj.parentNode;
	}while(thisObj.parentNode);
}
</script>
</head>
<body>
	<div class="mytable" align="center">
		<table border="0" cellpadding="0" cellspacing="0" width="60%">
			<tr>
				<th>ID</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tbody id="mytb">
				<tr onclick="mtrmove(this);" align="center">
					<td>1</td>
					<td>张三</td>
					<td>18</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>2</td>
					<td>李四</td>
					<td>19</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>3</td>
					<td>王五</td>
					<td>21</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>4</td>
					<td>赵六</td>
					<td>22</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>5</td>
					<td>孙七</td>
					<td>23</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>6</td>
					<td>刘八</td>
					<td>25</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>7</td>
					<td>周九</td>
					<td>32</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>8</td>
					<td>彭十</td>
					<td>35</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>9</td>
					<td>潼南</td>
					<td>38</td>
				</tr>
				<tr onclick="mtrmove(this);" align="center">
					<td>10</td>
					<td>漠北</td>
					<td>46</td>
				</tr>
			</tbody>
		<table>
	</div>
	<input type="button" value="删除行" onclick="executeAnimation();" />
</body>
</html>

shihuan830619

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态淡出表格行,鼠标悬浮提示框

[code="java"]动态淡出表格行,鼠标悬浮提示框.mytable table{border-right:1px solid #000000; border-bottom:1px solid #000000}.mytable table th{border-left:1px solid #000000; border-top:1px solid #0000...
复制链接

扫一扫

专栏目录