<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("#img1").click(function()
{
var $f=$("#dv1");
window.showModalDialog("result.html",$f,"dialogWidth=530px,dialogHeight=470px");
});
});
</script>
<body>
<div id="dv1">
<img id="img1" src="image/a10.jpg" width="80px" height="80" />
</div>
</body>
</html>
==========================
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("#img2").click(function()
{
window.close();
});
});
</script>
<body>
<img id="img2" src="image/a10.jpg" />
</body>
</html>
==================================
2013年12月16日 星期一
2013年12月13日 星期五
圖片page
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
var total=4;
var k=1;
info();
$("#a1").click(function()
{
if (k==1)
{
k=1;
alert("已是最前頁");
}
else
{
k--;
}
info();
});
$("#a2").click(function()
{
if (k==4)
{
k=4;
alert("已是最後一張");
}
else
{
k++;
}
info();
});
function info()
{
$("#dv2").html("<img id='img1' src='./image/a1"+(k-1)+".jpg' height='500' width='650' />");
$("#img1").hide();
$("#img1").show();
$("#dv1").html("影像共幾筆"+total+"===目前是第"+k+"筆");
}
});
</script>
<body>
<div id="dv1" style="width:690px; height:40px; background-color:#996">
</div>
<div id="dv2" style="background-color:#9CC; width:650px; height:500px" >
</div>
<div id="dv3" style="width:680px; height:40px; " align="right">
<a id="a1" href="javascript:void();">上一頁 </a>
<a id="a2" href="javascript:void();">下一頁</a>
</div>
</body>
</html>
===========================================
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
var total=4;
var k=1;
info();
$("#a1").click(function()
{
if (k==1)
{
k=1;
alert("已是最前頁");
}
else
{
k--;
}
info();
});
$("#a2").click(function()
{
if (k==4)
{
k=4;
alert("已是最後一張");
}
else
{
k++;
}
info();
});
function info()
{
$("#dv2").html("<img id='img1' src='./image/a1"+(k-1)+".jpg' height='500' width='650' />");
$("#img1").hide();
$("#img1").show();
$("#dv1").html("影像共幾筆"+total+"===目前是第"+k+"筆");
}
});
</script>
<body>
<div id="dv1" style="width:690px; height:40px; background-color:#996">
</div>
<div id="dv2" style="background-color:#9CC; width:650px; height:500px" >
</div>
<div id="dv3" style="width:680px; height:40px; " align="right">
<a id="a1" href="javascript:void();">上一頁 </a>
<a id="a2" href="javascript:void();">下一頁</a>
</div>
</body>
</html>
===========================================
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
var total=4;
var k=1;
var adtimer;
info();
$("#a1").click(function()
{
if (k==1)
{
k=1;
alert("已是最前頁");
}
else
{
k--;
}
info();
});
$("#a2").click(function()
{
show();
});
$("#a3").click(function()
{
var str=$("#a3").text();
if (str=="自動播放")
{
$("#a3").text("停止播放");
adtimer=setInterval(show,1000);
}
else
{
$("#a3").text("自動播放");
clearINterval(adtimer);
}
});
function show()
{
if(k==total)
{
clearINterval(adtimer);
$("#a3").text("自動播放");
alert("已是最後一張");
k=total;
}
else
{
k++;
}
info();
}
function info()
{
$("#dv2").html("<img id='img1' src='./image/a1"+(k-1)+".jpg' height='500' width='650' />");
$("#img1").hide();
$("#img1").show();
$("#dv1").html("影像共幾筆"+total+"===目前是第"+k+"筆");
}
});
</script>
<body>
<div id="dv1" style="width:690px; height:40px; background-color:#996">
</div>
<div id="dv2" style="background-color:#9CC; width:650px; height:500px" >
</div>
<div id="dv3" style="width:680px; height:40px; " align="right">
<a id="a1" href="javascript:void();">上一頁 </a>
<a id="a2" href="javascript:void();">下一頁</a>
<a id="a3" href="javascript:void();">自動播放</a>
</div>
</body>
</html>
================================
2013年12月11日 星期三
分頁
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
var k=$("#table1 tbody tr").length;
var rowevery=2;
var k1=Math.ceil(k/rowevery);
alert(k1);
});
</script>
<body>
<table id="table1" border="2" width="500" >
<thead>
<tr>
<td >學號</td>
<td >姓名</td>
<td >國文</td>
<td >英文</td>
<td >數學</td>
</tr>
</thead>
<tbody>
<tr>
<td >p1001</td>
<td >張三</td>
<td >80</td>
<td >40</td>
<td >89</td>
</tr>
<tr>
<td >p1002</td>
<td >小禮</td>
<td >81</td>
<td >87</td>
<td >69</td>
</tr>
<tr>
<td >p1003</td>
<td >小美</td>
<td >84</td>
<td >98</td>
<td >100</td>
</tr>
<tr>
<td >p1004</td>
<td >徐立</td>
<td >86</td>
<td >5O</td>
<td >78</td>
</tr>
<tr>
<td >p1005</td>
<td >徐立</td>
<td >86</td>
<td >5O</td>
<td >78</td>
</tr>
</tbody>
</table>
</body>
</html>
==========================
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
var k=$("#table1 tbody tr").length;
var rowevery=2;
var k1=Math.ceil(k/rowevery);
//alert(k1);
for (var i=1;i<=k1;i++)
{
$("#nav").append("<a class='ap' href='javascript:void' id='a'"+i+">"+i+"</a>");
}
$(".ap").click(function()
{
var p=$(this).text();
alert(p);
});
});
</script>
<body>
<table id="table1" border="2" width="500" >
<thead>
<tr>
<td >學號</td>
<td >姓名</td>
<td >國文</td>
<td >英文</td>
<td >數學</td>
</tr>
</thead>
<tbody>
<tr>
<td >p1001</td>
<td >張三</td>
<td >80</td>
<td >40</td>
<td >89</td>
</tr>
<tr>
<td >p1002</td>
<td >小禮</td>
<td >81</td>
<td >87</td>
<td >69</td>
</tr>
<tr>
<td >p1003</td>
<td >小美</td>
<td >84</td>
<td >98</td>
<td >100</td>
</tr>
<tr>
<td >p1004</td>
<td >徐立</td>
<td >86</td>
<td >5O</td>
<td >78</td>
</tr>
<tr>
<td >p1005</td>
<td >徐立</td>
<td >86</td>
<td >5O</td>
<td >78</td>
</tr>
</tbody>
</table>
<p>
<div id="nav" style=" background-color:#0FF; width:500px; height:20px"></div>
</body>
</html>
=================
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
var k=$("#table1 tbody tr").length;
var rowevery=2;
var k1=Math.ceil(k/rowevery);
//alert(k1);
for (var i=1;i<=k1;i++)
{
$("#nav").append("<a class='ap' href='javascript:void' id='a'"+i+">"+i+"</a>");
}
hidefun("s");
$(".ap").click(function()
{
var p=$(this).text();
//alert(p);
hidefun("s");
var po=(p-1)*rowevery;
for (var h=po;h<rowevery+po;h++)
{
$("#table1 tbody tr:eq("+h+")").show();
}
});
function hidefun(re)
{
for (var j=0;j<k;j++)
{
$("#table1 tbody tr:eq("+j+")").hide();
}
}
});
</script>
<body>
<table id="table1" border="2" width="500" >
<thead>
<tr>
<td >學號</td>
<td >姓名</td>
<td >國文</td>
<td >英文</td>
<td >數學</td>
</tr>
</thead>
<tbody>
<tr>
<td >p1001</td>
<td >張三</td>
<td >80</td>
<td >40</td>
<td >89</td>
</tr>
<tr>
<td >p1002</td>
<td >小禮</td>
<td >81</td>
<td >87</td>
<td >69</td>
</tr>
<tr>
<td >p1003</td>
<td >小美</td>
<td >84</td>
<td >98</td>
<td >100</td>
</tr>
<tr>
<td >p1004</td>
<td >徐立</td>
<td >86</td>
<td >5O</td>
<td >78</td>
</tr>
<tr>
<td >p1005</td>
<td >徐立</td>
<td >86</td>
<td >5O</td>
<td >78</td>
</tr>
</tbody>
</table>
<p>
<div id="nav" style=" background-color:#0FF; width:500px; height:20px"></div>
</body>
</html>
==========================
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
var k=$("#table1 tbody tr").length;
var rowevery=2;
var k1=Math.ceil(k/rowevery);
alert(k1);
});
</script>
<body>
<table id="table1" border="2" width="500" >
<thead>
<tr>
<td >學號</td>
<td >姓名</td>
<td >國文</td>
<td >英文</td>
<td >數學</td>
</tr>
</thead>
<tbody>
<tr>
<td >p1001</td>
<td >張三</td>
<td >80</td>
<td >40</td>
<td >89</td>
</tr>
<tr>
<td >p1002</td>
<td >小禮</td>
<td >81</td>
<td >87</td>
<td >69</td>
</tr>
<tr>
<td >p1003</td>
<td >小美</td>
<td >84</td>
<td >98</td>
<td >100</td>
</tr>
<tr>
<td >p1004</td>
<td >徐立</td>
<td >86</td>
<td >5O</td>
<td >78</td>
</tr>
<tr>
<td >p1005</td>
<td >徐立</td>
<td >86</td>
<td >5O</td>
<td >78</td>
</tr>
</tbody>
</table>
</body>
</html>
==========================
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
var k=$("#table1 tbody tr").length;
var rowevery=2;
var k1=Math.ceil(k/rowevery);
//alert(k1);
for (var i=1;i<=k1;i++)
{
$("#nav").append("<a class='ap' href='javascript:void' id='a'"+i+">"+i+"</a>");
}
$(".ap").click(function()
{
var p=$(this).text();
alert(p);
});
});
</script>
<body>
<table id="table1" border="2" width="500" >
<thead>
<tr>
<td >學號</td>
<td >姓名</td>
<td >國文</td>
<td >英文</td>
<td >數學</td>
</tr>
</thead>
<tbody>
<tr>
<td >p1001</td>
<td >張三</td>
<td >80</td>
<td >40</td>
<td >89</td>
</tr>
<tr>
<td >p1002</td>
<td >小禮</td>
<td >81</td>
<td >87</td>
<td >69</td>
</tr>
<tr>
<td >p1003</td>
<td >小美</td>
<td >84</td>
<td >98</td>
<td >100</td>
</tr>
<tr>
<td >p1004</td>
<td >徐立</td>
<td >86</td>
<td >5O</td>
<td >78</td>
</tr>
<tr>
<td >p1005</td>
<td >徐立</td>
<td >86</td>
<td >5O</td>
<td >78</td>
</tr>
</tbody>
</table>
<p>
<div id="nav" style=" background-color:#0FF; width:500px; height:20px"></div>
</body>
</html>
=================
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
var k=$("#table1 tbody tr").length;
var rowevery=2;
var k1=Math.ceil(k/rowevery);
//alert(k1);
for (var i=1;i<=k1;i++)
{
$("#nav").append("<a class='ap' href='javascript:void' id='a'"+i+">"+i+"</a>");
}
hidefun("s");
$(".ap").click(function()
{
var p=$(this).text();
//alert(p);
hidefun("s");
var po=(p-1)*rowevery;
for (var h=po;h<rowevery+po;h++)
{
$("#table1 tbody tr:eq("+h+")").show();
}
});
function hidefun(re)
{
for (var j=0;j<k;j++)
{
$("#table1 tbody tr:eq("+j+")").hide();
}
}
});
</script>
<body>
<table id="table1" border="2" width="500" >
<thead>
<tr>
<td >學號</td>
<td >姓名</td>
<td >國文</td>
<td >英文</td>
<td >數學</td>
</tr>
</thead>
<tbody>
<tr>
<td >p1001</td>
<td >張三</td>
<td >80</td>
<td >40</td>
<td >89</td>
</tr>
<tr>
<td >p1002</td>
<td >小禮</td>
<td >81</td>
<td >87</td>
<td >69</td>
</tr>
<tr>
<td >p1003</td>
<td >小美</td>
<td >84</td>
<td >98</td>
<td >100</td>
</tr>
<tr>
<td >p1004</td>
<td >徐立</td>
<td >86</td>
<td >5O</td>
<td >78</td>
</tr>
<tr>
<td >p1005</td>
<td >徐立</td>
<td >86</td>
<td >5O</td>
<td >78</td>
</tr>
</tbody>
</table>
<p>
<div id="nav" style=" background-color:#0FF; width:500px; height:20px"></div>
</body>
</html>
==========================
圖片展示與table
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
var $record=$("#table1 tbody tr").length;
var $flen=$("#table1 tbody tr:eq(0)").find("td").length;
$("#sp1").text($record);
$("#sp2").text($flen);
$("#table1 tbody tr").mouseover(function()
{
$(this).css("background-color","#ff00ff");
});
$("#table1 tbody tr").mouseleave(function()
{
$(this).css("background-color","#ffffff");
});
$("#table1 tbody tr").click(function()
{
var $i=$(this).index();
$("#t1").val($("#table1 tbody tr:eq("+$i+")").children("td").eq(0).text());
$("#t2").val($("#table1 tbody tr:eq("+$i+")").children("td").eq(1).text());
$("#t3").val($("#table1 tbody tr:eq("+$i+")").children("td").eq(2).text());
$("#t4").val($("#table1 tbody tr:eq("+$i+")").children("td").eq(3).text());
$("#t5").val($("#table1 tbody tr:eq("+$i+")").children("td").eq(4).text());
});
});
</script>
<body>
<div id="dv1" style="width:500px; height:20px; background-color:#09F;" >
總計錄數:<span id="sp1"></span>
總欄位數:<span id="sp2"></span>
</div>
<table id="table1" border="2" width="500" >
<thead>
<tr>
<td >學號</td>
<td >姓名</td>
<td >國文</td>
<td >英文</td>
<td >數學</td>
</tr>
</thead>
<tbody>
<tr>
<td >p1001</td>
<td >張三</td>
<td >80</td>
<td >40</td>
<td >89</td>
</tr>
<tr>
<td >p1002</td>
<td >小禮</td>
<td >81</td>
<td >87</td>
<td >69</td>
</tr>
<tr>
<td >p1003</td>
<td >小美</td>
<td >84</td>
<td >98</td>
<td >100</td>
</tr>
<tr>
<td >p1004</td>
<td >徐立</td>
<td >86</td>
<td >5O</td>
<td >78</td>
</tr>
</tbody>
</table>
<p>
<form id="f1">
<table id="table2" border="2" width="500">
<tr>
<td><input type="text" id="t1" size="10" /></td>
<td><input type="text" id="t2" size="10" /></td>
<td><input type="text" id="t3" size="10" /></td>
<td><input type="text" id="t4" size="10" /></td>
<td><input type="text" id="t5" size="10" /></td>
</tr>
</form>
</body>
</html>
===========================
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
var $record=$("#table1 tbody tr").length;
var $flen=$("#table1 tbody tr:eq(0)").find("td").length;
$("#sp1").text($record);
$("#sp2").text($flen);
$("#table1 tbody tr").mouseover(function()
{
$(this).css("background-color","#ff00ff");
});
$("#table1 tbody tr").mouseleave(function()
{
$(this).css("background-color","#ffffff");
});
$("#table1 tbody tr").click(function()
{
var $i=$(this).index();
$("#t1").val($("#table1 tbody tr:eq("+$i+")").children("td").eq(0).text());
$("#t2").val($("#table1 tbody tr:eq("+$i+")").children("td").eq(1).text());
$("#t3").val($("#table1 tbody tr:eq("+$i+")").children("td").eq(2).text());
$("#t4").val($("#table1 tbody tr:eq("+$i+")").children("td").eq(3).text());
$("#t5").val($("#table1 tbody tr:eq("+$i+")").children("td").eq(4).text());
});
});
</script>
<body>
<div id="dv1" style="width:500px; height:20px; background-color:#09F;" >
總計錄數:<span id="sp1"></span>
總欄位數:<span id="sp2"></span>
</div>
<table id="table1" border="2" width="500" >
<thead>
<tr>
<td >學號</td>
<td >姓名</td>
<td >國文</td>
<td >英文</td>
<td >數學</td>
</tr>
</thead>
<tbody>
<tr>
<td >p1001</td>
<td >張三</td>
<td >80</td>
<td >40</td>
<td >89</td>
</tr>
<tr>
<td >p1002</td>
<td >小禮</td>
<td >81</td>
<td >87</td>
<td >69</td>
</tr>
<tr>
<td >p1003</td>
<td >小美</td>
<td >84</td>
<td >98</td>
<td >100</td>
</tr>
<tr>
<td >p1004</td>
<td >徐立</td>
<td >86</td>
<td >5O</td>
<td >78</td>
</tr>
</tbody>
</table>
<p>
<form id="f1">
<table id="table2" border="2" width="500">
<tr>
<td><input type="text" id="t1" size="10" /></td>
<td><input type="text" id="t2" size="10" /></td>
<td><input type="text" id="t3" size="10" /></td>
<td><input type="text" id="t4" size="10" /></td>
<td><input type="text" id="t5" size="10" /></td>
</tr>
</form>
</body>
</html>
===========================
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
$(".child_ro1").slideUp();
$(".child_ro2").slideUp();
$(".child_ro3").slideUp();
$("tr.parent").click(function()
{
$(this).siblings(".child_"+this.id).slideToggle();
});
});
</script>
<body>
<table border="0" width="300" >
<tr class="parent" id="ro1">
<td style="background-color:#069; size:20">影像一</td>
</tr>
<tr class="child_ro1">
<td width="300" height="200">
<img src="image/a10.jpg" />
</td>
</tr>
<tr class="parent" id="ro2" >
<td style="background-color:#069; size:20">影像二</td>
</tr>
<tr class="child_ro2">
<td width="300" height="200">
<img src="image/a11.jpg" />
</td>
</tr>
<tr class="parent" id="ro3" >
<td style="background-color:#069; size:20">影像三</td>
</tr>
<tr class="child_ro3" >
<td width="300" height="200">
<img src="image/a12.jpg" />
</td>
</tr>
</table>
</body>
</html>
========
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
$(".child_ro1").slideUp();
$(".child_ro2").slideUp();
$(".child_ro3").slideUp();
$(".child_ro4").slideUp();
$(".child_ro5").slideUp();
$("td.parent").click(function()
{
$(this).siblings(".child_"+this.id).slideToggle();
});
});
</script>
<body>
<table border="0" >
<tr >
<td class="parent" id="ro1" height="200" bgcolor="#00CCFF">影<br />像<br />一</td>
<td class="child_ro1" >
<img src="image/a10.jpg" width="300" height="200" />
</td>
<td class="parent" id="ro2" height="200" bgcolor="#00CCFF">影<br />像<br />二</td>
<td class="child_ro2" >
<img src="image/a11.jpg" width="300" height="200" />
</td>
<td class="parent" id="ro3" height="200" bgcolor="#00CCFF">影<br />像<br />三</td>
<td class="child_ro3">
<img src="image/a12.jpg" width="300" height="200" />
</td>
</tr>
</table>
</body>
</html>
=================================
2013年12月9日 星期一
table 取值2012/12/9
table01.html
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("tbody tr:odd").css("background-color","#ff44dd");
$("tbody tr:even").css("background-color","#00ffee");
});
</script>
<body>
<table id="table1" border="2" width="300" >
<thead>
<tr>
<td >編號</td>
<td >姓名</td>
<td >生日</td>
<td >血型</td>
<td >學歷</td>
</tr>
</thead>
<tbody>
<tr>
<td >p1001</td>
<td >張三</td>
<td >45/8/04</td>
<td >O</td>
<td >高中</td>
</tr>
<tr>
<td >p1002</td>
<td >小禮</td>
<td >81/02/03</td>
<td >A</td>
<td >國中</td>
</tr>
<tr>
<td >p1003</td>
<td >小美</td>
<td >44/03/12</td>
<td >AB</td>
<td >專科</td>
</tr>
<tr>
<td >p1004</td>
<td >徐立</td>
<td >86/05/04</td>
<td >O</td>
<td >大學</td>
</tr>
</tbody>
</table>
</body>
</html>
================================
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("tbody tr:odd").css("background-color","#ff44dd");
$("tbody tr:even").css("background-color","#00ffee");
});
</script>
<body>
<table id="table1" border="2" width="300" >
<thead>
<tr>
<td >編號</td>
<td >姓名</td>
<td >生日</td>
<td >血型</td>
<td >學歷</td>
</tr>
</thead>
<tbody>
<tr>
<td >p1001</td>
<td >張三</td>
<td >45/8/04</td>
<td >O</td>
<td >高中</td>
</tr>
<tr>
<td >p1002</td>
<td >小禮</td>
<td >81/02/03</td>
<td >A</td>
<td >國中</td>
</tr>
<tr>
<td >p1003</td>
<td >小美</td>
<td >44/03/12</td>
<td >AB</td>
<td >專科</td>
</tr>
<tr>
<td >p1004</td>
<td >徐立</td>
<td >86/05/04</td>
<td >O</td>
<td >大學</td>
</tr>
</tbody>
</table>
</body>
</html>
================================
table02.html
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("#bt1").click(function()
{
$("tbody tr").css("background-color","#ffffff");
var t=$("#t1").val();
if (t=="")
{
alert("請輸入資料");
}
else
{
$("tr:contains('"+t+"')").css("background-color","#ff00ff");
}
});
});
</script>
<body>
編號:<input type="text" id="t1" name="t1" size="20" />
<input type="button" id="bt1" name="bt1" value="查詢" />
<table id="table1" border="2" width="300" >
<thead>
<tr>
<td >編號</td>
<td >姓名</td>
<td >生日</td>
<td >血型</td>
<td >學歷</td>
</tr>
</thead>
<tbody>
<tr>
<td >p1001</td>
<td >張三</td>
<td >45/8/04</td>
<td >O</td>
<td >高中</td>
</tr>
<tr>
<td >p1002</td>
<td >小禮</td>
<td >81/02/03</td>
<td >A</td>
<td >國中</td>
</tr>
<tr>
<td >p1003</td>
<td >小美</td>
<td >44/03/12</td>
<td >AB</td>
<td >專科</td>
</tr>
<tr>
<td >p1004</td>
<td >徐立</td>
<td >86/05/04</td>
<td >O</td>
<td >大學</td>
</tr>
</tbody>
</table>
</body>
</html>
=============
table03.html
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("#bt1").click(function()
{
$("tbody tr").css("background-color","#ffffff");
var t=$("#t1").val();
if (t=="")
{
alert("請輸入資料");
}
else
{
$("tr:contains('"+t+"')").css("background-color","#ff00ff");
}
});
$("img.im").click(function()
{
var t=$(this).attr("src");
window.open("bigimg1.html?t="+t,"win1","height=500,width=600,top=50,left=150");
});
});
</script>
<body>
編號:<input type="text" id="t1" name="t1" size="20" />
<input type="button" id="bt1" name="bt1" value="查詢" />
<table id="table1" border="2" width="300" >
<thead>
<tr>
<td >編號</td>
<td >姓名</td>
<td >生日</td>
<td >血型</td>
<td >學歷</td>
<td>相片</td>
</tr>
</thead>
<tbody>
<tr>
<td >p1001</td>
<td >張三</td>
<td >45/8/04</td>
<td >O</td>
<td >高中</td>
<td><img id="img1" name="img1" class="im" src="image/bt01.png" width="45" height="45"/></td>
</tr>
<tr>
<td >p1002</td>
<td >小禮</td>
<td >81/02/03</td>
<td >A</td>
<td >國中</td>
<td><img id="img1" name="img1" class="im" src="image/bt02.png" width="45" height="45" /></td>
</tr>
<tr>
<td >p1003</td>
<td >小美</td>
<td >44/03/12</td>
<td >AB</td>
<td >專科</td>
<td><img id="img1" name="img1" class="im" src="image/bt03.png" width="45" height="45" /></td>
</tr>
<tr>
<td >p1004</td>
<td >徐立</td>
<td >86/05/04</td>
<td >O</td>
<td >大學</td>
<td><img id="img1" name="img1" class="im" src="image/bt04.png" width="45" height="45"/></td>
</tr>
</tbody>
</table>
</body>
</html>
=========
bigimg1.html
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
function fun1()
{
var kpath=location.href;
var k1=kpath.split("?");//
var k2=k1[1].split("=");
$("#img1").attr("src",k2[1]);
}
</script>
<body onload="fun1()">
<center>
<img id="img1" name="img1" src="" width="600" height="500" />
</center>
</body>
</html>
=========================
table04.html
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("#bt1").click(function()
{
$("tbody tr").css("background-color","#ffffff");
var t=$("#t1").val();
if (t=="")
{
alert("請輸入資料");
}
else
{
$("tr:contains('"+t+"')").css("background-color","#ff00ff");
var r=$("#table1 tr:contains('"+t+"') td img").attr("src");
window.open("bigimg1.html?r="+r,"win1","height=500,width=600,top=50,left=320");
}
});
});
</script>
<body>
編號:<input type="text" id="t1" name="t1" size="20" />
<input type="button" id="bt1" name="bt1" value="查詢" />
<table id="table1" border="2" width="300" >
<thead>
<tr>
<td >編號</td>
<td >姓名</td>
<td >生日</td>
<td >血型</td>
<td >學歷</td>
<td>相片</td>
</tr>
</thead>
<tbody>
<tr>
<td >p1001</td>
<td >張三</td>
<td >45/8/04</td>
<td >O</td>
<td >高中</td>
<td><img id="img1" name="img1" class="im" src="image/bt01.png" width="45" height="45"/></td>
</tr>
<tr>
<td >p1002</td>
<td >小禮</td>
<td >81/02/03</td>
<td >A</td>
<td >國中</td>
<td><img id="img1" name="img1" class="im" src="image/bt02.png" width="45" height="45" /></td>
</tr>
<tr>
<td >p1003</td>
<td >小美</td>
<td >44/03/12</td>
<td >AB</td>
<td >專科</td>
<td><img id="img1" name="img1" class="im" src="image/bt03.png" width="45" height="45" /></td>
</tr>
<tr>
<td >p1004</td>
<td >徐立</td>
<td >86/05/04</td>
<td >O</td>
<td >大學</td>
<td><img id="img1" name="img1" class="im" src="image/bt04.png" width="45" height="45"/></td>
</tr>
</tbody>
</table>
</body>
</html>
============
table05.html
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("#bt1").click(function()
{
$("tbody tr").css("background-color","#ffffff");
var t=$("#t1").val();
if (t=="")
{
alert("請輸入資料");
}
else
{
$("tr:contains('"+t+"')").css("background-color","#ff00ff");
var r=$("#table1 tr:contains('"+t+"') td img").attr("src");
$("#imgshow").attr("src",r);
//window.open("bigimg1.html?r="+r,"win1","height=500,width=600,top=50,left=320");
}
});
});
</script>
<body>
<div id="dv1" style="width:300px; height:450px; background-color:#09F; float:left" >
編號:<input type="text" id="t1" name="t1" size="20" />
<input type="button" id="bt1" name="bt1" value="查詢" />
<table id="table1" border="2" width="300" >
<thead>
<tr>
<td >編號</td>
<td >姓名</td>
<td >生日</td>
<td >血型</td>
<td >學歷</td>
<td>相片</td>
</tr>
</thead>
<tbody>
<tr>
<td >p1001</td>
<td >張三</td>
<td >45/8/04</td>
<td >O</td>
<td >高中</td>
<td><img class="im" src="image/bt01.png" width="45" height="45"/></td>
</tr>
<tr>
<td >p1002</td>
<td >小禮</td>
<td >81/02/03</td>
<td >A</td>
<td >國中</td>
<td><img class="im" src="image/bt02.png" width="45" height="45" /></td>
</tr>
<tr>
<td >p1003</td>
<td >小美</td>
<td >44/03/12</td>
<td >AB</td>
<td >專科</td>
<td><img class="im" src="image/bt03.png" width="45" height="45" /></td>
</tr>
<tr>
<td >p1004</td>
<td >徐立</td>
<td >86/05/04</td>
<td >O</td>
<td >大學</td>
<td><img class="im" src="image/bt04.png" width="45" height="45"/></td>
</tr>
</tbody>
</table>
</div>
<div id="dv2" style="background-color:#CCC; position:absolute; float:right; left:310px; width:500px; height:250px; padding:100px">
<img id="imgshow" name="imgshow" src="image/a10.jpg" width="300" height="200" />
</div>
</body>
</html>
=========
table6.html
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("#bt1").click(function()
{
$("tbody tr").css("background-color","#ffffff");
var t=$("#t1").val();
if (t=="")
{
alert("請輸入資料");
}
else
{
$("tr:contains('"+t+"')").css("background-color","#ff00ff");
var r=$("#table1 tr:contains('"+t+"') td img").attr("src");
$("#imgshow").attr("src",r);
//window.open("bigimg1.html?r="+r,"win1","height=500,width=600,top=50,left=320");
var i= $("tr:contains('"+t+"')").index()+1;
//alert(i);
//alert($("#table1 tr:eq('"+i+"') td:eq(0)").text());
$("#o1").val($("#table1 tr:eq('"+i+"') td:eq(0)").text());
$("#o2").val($("#table1 tr:eq('"+i+"') td:eq(1)").text());
$("#o3").val($("#table1 tr:eq('"+i+"') td:eq(2)").text());
$("#o4").val($("#table1 tr:eq('"+i+"') td:eq(3)").text());
$("#o5").val($("#table1 tr:eq('"+i+"') td:eq(4)").text());
}
});
});
</script>
<body>
<div id="dv1" style="width:300px; height:450px; background-color:#09F; float:left" >
編號:<input type="text" id="t1" name="t1" size="20" />
<input type="button" id="bt1" name="bt1" value="查詢" />
<table id="table1" border="2" width="300" >
<thead>
<tr>
<td >編號</td>
<td >姓名</td>
<td >生日</td>
<td >血型</td>
<td >學歷</td>
<td>相片</td>
</tr>
</thead>
<tbody>
<tr>
<td >p1001</td>
<td >張三</td>
<td >45/8/04</td>
<td >O</td>
<td >高中</td>
<td><img class="im" src="image/bt01.png" width="45" height="45"/></td>
</tr>
<tr>
<td >p1002</td>
<td >小禮</td>
<td >81/02/03</td>
<td >A</td>
<td >國中</td>
<td><img class="im" src="image/bt02.png" width="45" height="45" /></td>
</tr>
<tr>
<td >p1003</td>
<td >小美</td>
<td >44/03/12</td>
<td >AB</td>
<td >專科</td>
<td><img class="im" src="image/bt03.png" width="45" height="45" /></td>
</tr>
<tr>
<td >p1004</td>
<td >徐立</td>
<td >86/05/04</td>
<td >O</td>
<td >大學</td>
<td><img class="im" src="image/bt04.png" width="45" height="45"/></td>
</tr>
</tbody>
</table>
<p>
<form id="f1" >
<table id="table2" border="0" width="300">
<tr>
<td>編號:</td>
<td><input type="text" id="o1" name="o1" size="20px" /></td>
</tr>
<tr>
<td>生日:</td>
<td><input type="text" id="o2" name="o2" size="20px" /></td>
</tr>
<tr>
<td>血型:</td>
<td><input type="text" id="o3" name="o3" size="20px" /></td>
</tr>
<tr>
<td>學歷:</td>
<td><input type="text" id="o4" name="o4" size="20px" /></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" id="o5" name="o5" size="20px" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" id="sm1" name="sm1" value="傳送" >
<input type="reset" id="rs1" name="rs1" value="清除" align="right" /></td>
</tr>
</table>
</form>
</div>
<div id="dv2" style="background-color:#CCC; position:absolute; float:right; left:310px; width:500px; height:250px; padding:100px">
<img id="imgshow" name="imgshow" src="image/a10.jpg" width="300" height="200" />
</div>
</body>
</html>
2013年12月6日 星期五
css
<!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=utf-8" />
<title>無標題文件</title>
</head>
<style type="text/css">
font1{size:20px}
font2{size:16px}
</style>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("#ul li").mouseover(function()
{
$(this).eq(0).css("background-color","#00ff00");
$(this).removeClass("font2");
$(this).addClass("font1");
});
$("#ul li").mouseout(function(e)
{
$(this).eq(0).css("background-color","#ffffff");
$(this).removeClass("font1");
$(this).addClass("font2");
});
});
</script>
<body>
<div style="width:130px">
<ul id="u" style="list-style:none" >
<li style="list-style:url(image/ic_launcher.png)">程式設計班</li>
<li style="list-style:url(image/ic_launcher.png)">美工設計班</li>
<li style="list-style:url(image/ic_launcher.png)">網頁設計班</li>
</ul>
</div>
</body>
</html>
================
<!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=utf-8" />
<title>無標題文件</title>
</head>
<style type="text/css">
font1{size:20px}
font2{size:16px}
</style>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
function fun1()
{
var t=new Array();
t[0]=$("#t1").val();
t[1]=$("#t2").val();
t[2]=$("#t3").val();
t[3]=$("#t4").val();
t[4]=$("#t5").val();
var min=t[0];
for (var i=0;i<t.length;i++)
{
if (parseInt(t[i]<parseInt(min)))
{
min=t[i];
}
}
$("#t6").val(min);
}
function fun2()
{
$("#t1").val("");//清除表單文字框
$("#t2").val("");
$("#t3").val("");
$("#t4").val("");
$("#t5").val("");
$("#t6").val("");
}
function funw()
{
$("#table1").slideUp(1000);
}
function func()
{
$("#table1").slideDown(1000);
}
</script>
<body onload="func()">
<form id="f1" name="f1">
<div id="dv1" style="background-color:#9C0; width:500px; height:20px" >
<a href="javascript:void();" onclick="funw()">開啟</a>
<a href="javascript:void();" onclick="func()">關閉</a>
</div>
<table border="2" width="500px" id="table1">
<tr>
<td>數值一</td>
<td>
<input type="text" id="t1" name="t1" size="20" />
</td>
<td>數值二</td>
<td>
<input type="text" id="t2" name="t2" size="20" />
</td>
</tr>
<tr>
<td>數值三</td>
<td>
<input type="text" id="t3" name="t3" size="20" />
</td>
<td>數值四</td>
<td>
<input type="text" id="t4" name="t4" size="20" />
</td>
</tr>
<tr>
<td>數值五</td>
<td>
<input type="text" id="t5" name="t5" size="20" />
</td>
<td>最小值</td>
<td>
<input type="text" id="t6" name="t6" size="20" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="bt1" name="bt1" value="執行" onclick="fun1()"/>
</td>
<td colspan="2">
<input type="button" id="bt2" name="bt2" value="清除" onclick="fun2()"/>
</td>
</tr>
</table>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
</head>
<style type="text/css">
font1{size:20px}
font2{size:16px}
</style>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("#ul li").mouseover(function()
{
$(this).eq(0).css("background-color","#00ff00");
$(this).removeClass("font2");
$(this).addClass("font1");
});
$("#ul li").mouseout(function(e)
{
$(this).eq(0).css("background-color","#ffffff");
$(this).removeClass("font1");
$(this).addClass("font2");
});
});
</script>
<body>
<div style="width:130px">
<ul id="u" style="list-style:none" >
<li style="list-style:url(image/ic_launcher.png)">程式設計班</li>
<li style="list-style:url(image/ic_launcher.png)">美工設計班</li>
<li style="list-style:url(image/ic_launcher.png)">網頁設計班</li>
</ul>
</div>
</body>
</html>
================
<!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=utf-8" />
<title>無標題文件</title>
</head>
<style type="text/css">
font1{size:20px}
font2{size:16px}
</style>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
function fun1()
{
var t=new Array();
t[0]=$("#t1").val();
t[1]=$("#t2").val();
t[2]=$("#t3").val();
t[3]=$("#t4").val();
t[4]=$("#t5").val();
var min=t[0];
for (var i=0;i<t.length;i++)
{
if (parseInt(t[i]<parseInt(min)))
{
min=t[i];
}
}
$("#t6").val(min);
}
function fun2()
{
$("#t1").val("");//清除表單文字框
$("#t2").val("");
$("#t3").val("");
$("#t4").val("");
$("#t5").val("");
$("#t6").val("");
}
function funw()
{
$("#table1").slideUp(1000);
}
function func()
{
$("#table1").slideDown(1000);
}
</script>
<body onload="func()">
<form id="f1" name="f1">
<div id="dv1" style="background-color:#9C0; width:500px; height:20px" >
<a href="javascript:void();" onclick="funw()">開啟</a>
<a href="javascript:void();" onclick="func()">關閉</a>
</div>
<table border="2" width="500px" id="table1">
<tr>
<td>數值一</td>
<td>
<input type="text" id="t1" name="t1" size="20" />
</td>
<td>數值二</td>
<td>
<input type="text" id="t2" name="t2" size="20" />
</td>
</tr>
<tr>
<td>數值三</td>
<td>
<input type="text" id="t3" name="t3" size="20" />
</td>
<td>數值四</td>
<td>
<input type="text" id="t4" name="t4" size="20" />
</td>
</tr>
<tr>
<td>數值五</td>
<td>
<input type="text" id="t5" name="t5" size="20" />
</td>
<td>最小值</td>
<td>
<input type="text" id="t6" name="t6" size="20" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="bt1" name="bt1" value="執行" onclick="fun1()"/>
</td>
<td colspan="2">
<input type="button" id="bt2" name="bt2" value="清除" onclick="fun2()"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Mouse事件
$("選擇器").mouseover(function(e)
{
e.pageX(px);
e.pageY(px) ; //物件座標值
$("選擇器").append(元件);
});
$("選擇器").mouseout(function(e)
{
$("選擇器")..remove();
});
--------------
$("選擇器").);css({屬性1:屬性值1,屬性2:屬性值2,屬性3:屬性值3});
屬性群集
---------------------------
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("a.tooltip").mouseover(function(e)
{
var tp="<div id='tooltip' ><img src='image/a12.jpg' width=500 height=450 /></div>";
$("body").append(tp);
$("#tooltip").css({"top":e.pageY+"px","left":e.pageX+"px" }).show();
});
$("a.tooltip").mouseout(function(e)
{
$("#tooltip").remove();
});
});
</script>
<body>
<a href="javascript:void();" class="tooltip">影像一</a>
</body>
</html>
{
e.pageX(px);
e.pageY(px) ; //物件座標值
$("選擇器").append(元件);
});
$("選擇器").mouseout(function(e)
{
$("選擇器")..remove();
});
--------------
$("選擇器").);css({屬性1:屬性值1,屬性2:屬性值2,屬性3:屬性值3});
屬性群集
---------------------------
<!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=utf-8" />
<title>無標題文件</title>
</head>
<script language="javascript" src="jquery-1.10.2.js"></script>
<script language="javascript">
$(document).ready(function()
{
$("a.tooltip").mouseover(function(e)
{
var tp="<div id='tooltip' ><img src='image/a12.jpg' width=500 height=450 /></div>";
$("body").append(tp);
$("#tooltip").css({"top":e.pageY+"px","left":e.pageX+"px" }).show();
});
$("a.tooltip").mouseout(function(e)
{
$("#tooltip").remove();
});
});
</script>
<body>
<a href="javascript:void();" class="tooltip">影像一</a>
</body>
</html>
訂閱：
意見 (Atom)