因为项目的需要，所以利用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="关闭古诗欣赏" οnclick="closeDiv();">关闭古诗欣赏</a>
</span>
<hr size="2"/>
<center>
床前明月光，<br/><br/>
疑似地上霜；<br/><br/>
举头望明月，<br/><br/>
低头思故乡。
</center>
</p>
</div>
</body>
</html>
效果图以及整个demo见附件.
<!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="关闭古诗欣赏" οnclick="closeDiv();">关闭古诗欣赏</a>
</span>
<hr size="2"/>
<center>
床前明月光，<br/><br/>
疑似地上霜；<br/><br/>
举头望明月，<br/><br/>
低头思故乡。
</center>
</p>
</div>
</body>
</html>
效果图以及整个demo见附件.
1678
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
