練習find() ,contains(),filter() 整體程式碼如下：
<!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>contains</title>
</head>
<style type="text/css">
.color{
background-color:#F9F;
}
.color2{
background-color:#FFF;
}
.pdata{
background-color:#FF0;
}
</style>
<script language="javascript" src="jquery-1.8.0.js" ></script>
<script language="javascript">
$(document).ready(function()
{
$("#dv1").hide(100);
$("#tb1 thead tr").addClass("color");
$("#tb1 tbody tr").mouseover(function()
{
$(this).addClass("pdata");
});
$("#tb1 tbody tr").mouseleave(function()
{
$(this).removeClass("pdata");
});
$("#tb1 tbody tr").click(function()
{
$("#dv1").hide(100);
var t1=$(this).find("td").eq(0).text();
var t2=$(this).find("td").eq(1).text();
var t3=$(this).find("td").eq(2).text();
var t4=$(this).find("td").eq(3).text();
var t5=$(this).find("td").eq(4).text();
$("#t1").val(t1);
$("#t2").val(t2);
$("#t3").val(t3);
$("#t4").val(t4);
$("#t5").val(t5);
var x=$(this).offset().left;
var y=$(this).offset().top;
$("#dv1").show(500);
$("#dv1").css('position','absolute');
$("#dv1").css('left',x+50);
$("#dv1").css('top',y);
});
$("#a1").click(function()
{
$("#t1").val("");
$("#t2").val("");
$("#t3").val("");
$("#t4").val("");
$("#t5").val("");
$("#tb1 tbody tr").css('background-color','');
var id=$("#t6").val();
alert(id);
var qtr=$("#tb1 tbody tr:contains('"+id+"')");
qtr.css('background-color','#009999');
alert(qtr.find("td").length);
for(var i=0;i<qtr.find("td").length;i++){
$("#tb2").find("input").eq(i).val(qtr.find("td").eq(i).text());
}
$("#tb1 tbody tr").hide().filter(":contains('"+id+"')").show();
/*
var qtd=$("#tb1 tbody tr td:contains('"+id+"')");
$("#tb1 tbody tr:contains('"+id+"')").css('background-color','#009999');
$("#t1").val( qtd.text());
$("#t2").val( qtd.next().text());
alert(qtd.next().text());
$("#t3").val($("#tb1 tbody tr:contains('"+id+"')").next().next().text());
$("#t4").val($("#tb1 tbody tr:contains('"+id+"')").next().next().next().text());
$("#t5").val($("#tb1 tbody tr:contains('"+id+"')").next().next().next().next().text());*/
});
$("#a2").click(function()
{
var d1=parseInt($("#sel1").val());
var d2=parseInt($("#sel2").val());
var d3=$("#cont").val();
//alert(d1);
switch(d1)
{
case 5:
switch(d2)
{
case 1:
var len=$("#tb1 tbody tr").length;
for (var i=0;i<len;i++)
{
var t7=$("#tb1 tbody tr:eq("+i+")").find("td").eq(4).text();
if(t7>d3)
{
$("#tb1 tbody tr:eq("+i+")").show();
}
else
{
$("#tb1 tbody tr:eq("+i+")").hide();
}
}
break;
case 2:
var len=$("#tb1 tbody tr").length;
for (var i=0;i<len;i++)
{
var t7=$("#tb1 tbody tr:eq("+i+")").find("td").eq(4).text();
if(t7<d3)
{
$("#tb1 tbody tr:eq("+i+")").show();
}
else
{
$("#tb1 tbody tr:eq("+i+")").hide();
}
}
break;
case 3:
$("#tb1 tbody tr").hide();
$("#tb1 tbody tr").filter(":contains('"+d3+"')").show();
break;
case 4:
var len=$("#tb1 tbody tr").length;
for (var i=0;i<len;i++)
{
var t7=$("#tb1 tbody tr:eq("+i+")").find("td").eq(4).text();
if(t7>=d3)
{
$("#tb1 tbody tr:eq("+i+")").show();
}
else
{
$("#tb1 tbody tr:eq("+i+")").hide();
}
}
break;
case 5:
var len=$("#tb1 tbody tr").length;
for (var i=0;i<len;i++)
{
var t7=$("#tb1 tbody tr:eq("+i+")").find("td").eq(4).text();
if(t7<=d3)
{
$("#tb1 tbody tr:eq("+i+")").show();
}
else
{
$("#tb1 tbody tr:eq("+i+")").hide();
}
}
break;
}
break;
default:
alert("請選價格");
}
});
});
function fun1()
{
location.reload();
}
</script>
<body >
<div id="dv2" >
<table id="tb1" width="600" border="2">
<thead>
<tr>
<td width="120" >編號</td>
<td width="120" >書名</td>
<td width="120" >作者</td>
<td width="120" >出版社</td>
<td width="120" >價格</td>
</tr>
</thead>
<tbody>
<tr>
<td>b1001</td>
<td>java</td>
<td>小明</td>
<td>文魁</td>
<td>300</td>
</tr>
<tr>
<td>b1002</td>
<td>c++</td>
<td>小張</td>
<td>基峯</td>
<td>400</td>
</tr>
<tr>
<td>b1003</td>
<td>Delphi</td>
<td>小玲</td>
<td>知城</td>
<td>250</td>
</tr>
<tr>
<td>b1004</td>
<td>Jbuilder</td>
<td>小張</td>
<td>松崗</td>
<td>600</td>
</tr>
</tbody>
</table>
</div>
<p><p>
<div id="dv1" style="background-image:url(image/bg2.jpg);width:600px" >
<form id="f1" >
<table id="tb2" width="600" border="2">
<tr>
<td width="81">編號 </td>
<td width="501"><input id="t1" name="t1" type="text" size="30" /></td>
</tr>
<tr>
<td>書名</td>
<td><input id="t2" name="t2" type="text" size="30" /></td>
</tr>
<tr>
<td>作者</td>
<td><input id="t3" name="t3" type="text" size="30" /></td>
</tr>
<tr>
<td>出版社</td>
<td><input id="t4" name="t4" type="text" size="30" /></td>
</tr>
<tr>
<td>價格</td>
<td><input id="t5" name="t5" type="text" size="30" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<input type="submit" name="s1" value="確認" />
</td>
<td>
<input type="reset" name="s2" value="清除" />
<input type="button" name="bt3" value="關閉" onclick="fun1()" />
</td>
</tr>
<tr>
<td>查詢編號</td>
<td><input id="t6" name="t6" type="text" size="30" />
<a id="a1" href="javascript:;" >送出查詢</a></td>
</tr>
</table>
</form>
<div id="dv3">
查詢價格
<select name="sel1" id="sel1" >
<option value="1">編號</option>
<option value="2">書名</option>
<option value="3">作者</option>
<option value="4">出版社</option>
<option value="5">價格</option>
</select>
內容
<select name="sel2" id="sel2">
<option value="1">大於</option>
<option value="2">小於</option>
<option value="3">等於</option>
<option value="4">大於等於</option>
<option value="5">小於等於</option>
</select>
<input id="cont" name="cont" type="text" size="20" />
<a id="a2" href="javascript:;" >查詢</a>
</div>
</div>
</body>
</html>
沒有留言:
張貼留言