因为项目的需要，所以利用jquery实现了简单的点击表格某一行，行后直接弹出一个div对话框的效果，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>New Web Project</title>
<script type="text/javascript" src="jquery-1.2.6.min.js">
</script>
<script type="text/javascript">
// 鼠标移动到表格某一行，这一行的背景色变红，鼠标移开，还原背景色
$(document).ready(function(){
$("tr").bind('mouseover', function(){
$(this).css("background-color", "red").css("cursor", "hand");
});
$("tr").bind('mouseout', function(){
$(this).css("background-color", "");
});
// 给表格的每一行都绑定一个单击事件，用来触发弹出div对话框的函数
$("tr").bind('click', function(){
$("#divResource").show();
getAbsPoint($(this).get(0));
});
});
// 取得空间的坐标位置
function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
}
// 给弹出的div设置样式 和空间坐标
$("#divResource").css({
top: y,
left: x + 400,
width:'300px',
height:'200px'
});
}
// 关闭弹出框
function closeDiv(){
$("#divResource").hide();
}
</script>
</head>
<body>
表格
<br/><hr size="3"/>
<table border="1" width="400px" height="300px" bgcolor="gray">
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
</table>
<div id="divResource" style="display:none;position:absolute;background-color:#0000FF;">
<p>
<span style="padding-left:200px">
<a href="javascript:void(0)" style="text-decoration:none;" title="关闭古诗欣赏" onclick="closeDiv();">关闭古诗欣赏</a>
</span>
<hr size="2"/>
<center>
床前明月光，<br/><br/>
疑似地上霜；<br/><br/>
举头望明月，<br/><br/>
低头思故乡。
</center>
</p>
</div>
</body>
</html>
效果图以及整个demo见附件.
- 大小: 68 KB
分享到：
相关推荐
jquery div 弹出框 jquery div 弹出框 jquery div 弹出框 jquery div 弹出框
动态表格,功能为点击添加按钮，表格增加一行并给其name属性赋予的值，点击删除，自动删除这一行，具体实现如下
弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出...
jQuery超炫淡入淡出效果DIV渐变居中弹出框插件
jquery弹出框jquery弹出框jquery弹出框jquery弹出框jquery弹出框jquery弹出框jquery弹出框jquery弹出框
在页面加载后或者点击页面的某个链接时弹出一个div层，同时页面的其他地方会变灰
Jquery自带的弹出框效果
Jquery实现表格动态增加一行，删除一行(最简洁的代码实现)
jQuery弹出层插件三种简单遮罩弹出框效果
主要介绍了jQuery获取table下某一行某一列的值实现代码的相关资料,需要的朋友可以参考下
jQuery点击按钮弹出登录框效果
利用jquery实现表格动态分页，前台用jquery实现。后台用java实现动态查询数据，分页。
jquery实现弹出登陆框效果，供大家一起共同分享学习。
jQuery实现表头固定表格内容滚动效果 jQuery实现表头固定表格内容滚动效果
jquery24小时弹出一次DIV注册提示框效果
好看的jquery弹出框样式代码！
ymPrompt 消息提示 DIV弹出框 组件 DIV弹出框,消息提示,组件,ymPrompt
jQuery弹出框 jQuery弹出框 jQuery弹出框 jQuery弹出框 jQuery弹出框 jQuery弹出框
jquery实现表格排序，绝对实用。jquery实现表格排序，绝对实用。