<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>
=================================
沒有留言:
張貼留言