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>
================================
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>






張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)