jquery入門—數(shù)據(jù)刪除與隔行變色以及圖片預覽
更新時間：2013年01月07日 11:13:47 作者：
項目需求：表格中數(shù)據(jù)隔行變色、刪除數(shù)據(jù)、全選刪除、鼠標移動到圖片時顯示圖片預覽等等，感興趣的朋友可以參考下
1、功能需求：表格中數(shù)據(jù)隔行變色、刪除數(shù)據(jù)、全選刪除、鼠標移動到圖片時顯示圖片預覽
2、示例代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 數(shù)據(jù)管理 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<style type="text/css">
body{font-size:12px}
table{width:360px;border-collapse:collapse}
table tr th,td{border:solid 1px #666;text-align:center}
table tr td img{border:solid 1px #ccc;padding:3px;width:42px;height:60px;cursor:hand}
table tr td span{float:left;padding-left:12px}
table tr th{background-color:#ccc;height:32px}
.clsImg{position:absolute;border:solid 1px #ccc;padding:3px;width:85px;height:120px;background-color:#eee;display:none}
.btn{border:#666 1px solid;padding:2px;width:50px;filter:progid;DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9DB);}
</style>
<script type="text/javascript">
$(function(){
/**隔行變色**/
$("table tr:nth-child(odd)").css("background-color","#eee");
/**全選復選框單擊事件**/
$("#chkAll").click(function(){
if(this.checked){
$("table tr td input[type=checkbox]").attr("checked",true);
}else{
$("table tr td input[type=checkbox]").attr("checked",false);
}
});
/**刪除按鈕單擊事件**/
$("#btnDel").click(function(){
var intL = $("table tr td input:checked:not('#chkAll')").length;
if(intL !=0){
$("table tr td input[type=checkbox]:not('#chkAll')"). each(function(index){
if(this.checked){
$("table tr[id="+this.value+"]").remove();
}
});
}
});
/**小圖片鼠標移動事件**/
var x = 5; var y = 15;
$("table tr td img").mousemove(function(e){
$("#imgTip").attr("src",this.src).css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show(3000);
});
/**小圖片鼠標移出事件**/
$("table tr td img").mouseout(function(){
$("#imgTip").hide();
});
});
</script>
</HEAD>
<BODY>
<table>
<tr>
<th>選項</th>
<th>編號</th>
<th>封面</th>
<th>購書人</th>
<th>性別</th>
<th>購書價</th>
</tr>
<tr id="0">
<td><input id="Checkbox1" type="checkbox" value="0"/></td>
<td>1001</td>
<td><img src="Images/img03.jpg" alt=""></td>
<td>劉明明</td>
<td>女</td>
<td>37.80元</td>
</tr>
<tr id="1">
<td><input id="Checkbox2" type="checkbox" value="1"/></td>
<td>1002</td>
<td><img src="Images/img04.jpg" alt=""></td>
<td>李小明</td>
<td>男</td>
<td>35.60元</td>
</tr>
<tr id="2">
<td><input id="Checkbox3" type="checkbox" value="2"/></td>
<td>1003</td>
<td><img src="Images/img08.jpg" alt=""></td>
<td>張小星</td>
<td>女</td>
<td>45.60元</td>
</tr>
</table>
<table>
<tr>
<td style="text-align:left;height:28px">
<span>
<input id="chkAll" type="checkbox"/>全選
</span>
<span>
<input id="btnDel" type="button" value="刪除" class="btn"/>
</span>
</td>
</tr>
</table>
<img id="imgTip" class="clsImg" src="Images/img03.gif"/>
</BODY>
</HTML>
3、效果圖預覽：
2、示例代碼如下：
復制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 數(shù)據(jù)管理 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<style type="text/css">
body{font-size:12px}
table{width:360px;border-collapse:collapse}
table tr th,td{border:solid 1px #666;text-align:center}
table tr td img{border:solid 1px #ccc;padding:3px;width:42px;height:60px;cursor:hand}
table tr td span{float:left;padding-left:12px}
table tr th{background-color:#ccc;height:32px}
.clsImg{position:absolute;border:solid 1px #ccc;padding:3px;width:85px;height:120px;background-color:#eee;display:none}
.btn{border:#666 1px solid;padding:2px;width:50px;filter:progid;DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9DB);}
</style>
<script type="text/javascript">
$(function(){
/**隔行變色**/
$("table tr:nth-child(odd)").css("background-color","#eee");
/**全選復選框單擊事件**/
$("#chkAll").click(function(){
if(this.checked){
$("table tr td input[type=checkbox]").attr("checked",true);
}else{
$("table tr td input[type=checkbox]").attr("checked",false);
}
});
/**刪除按鈕單擊事件**/
$("#btnDel").click(function(){
var intL = $("table tr td input:checked:not('#chkAll')").length;
if(intL !=0){
$("table tr td input[type=checkbox]:not('#chkAll')"). each(function(index){
if(this.checked){
$("table tr[id="+this.value+"]").remove();
}
});
}
});
/**小圖片鼠標移動事件**/
var x = 5; var y = 15;
$("table tr td img").mousemove(function(e){
$("#imgTip").attr("src",this.src).css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show(3000);
});
/**小圖片鼠標移出事件**/
$("table tr td img").mouseout(function(){
$("#imgTip").hide();
});
});
</script>
</HEAD>
<BODY>
<table>
<tr>
<th>選項</th>
<th>編號</th>
<th>封面</th>
<th>購書人</th>
<th>性別</th>
<th>購書價</th>
</tr>
<tr id="0">
<td><input id="Checkbox1" type="checkbox" value="0"/></td>
<td>1001</td>
<td><img src="Images/img03.jpg" alt=""></td>
<td>劉明明</td>
<td>女</td>
<td>37.80元</td>
</tr>
<tr id="1">
<td><input id="Checkbox2" type="checkbox" value="1"/></td>
<td>1002</td>
<td><img src="Images/img04.jpg" alt=""></td>
<td>李小明</td>
<td>男</td>
<td>35.60元</td>
</tr>
<tr id="2">
<td><input id="Checkbox3" type="checkbox" value="2"/></td>
<td>1003</td>
<td><img src="Images/img08.jpg" alt=""></td>
<td>張小星</td>
<td>女</td>
<td>45.60元</td>
</tr>
</table>
<table>
<tr>
<td style="text-align:left;height:28px">
<span>
<input id="chkAll" type="checkbox"/>全選
</span>
<span>
<input id="btnDel" type="button" value="刪除" class="btn"/>
</span>
</td>
</tr>
</table>
<img id="imgTip" class="clsImg" src="Images/img03.gif"/>
</BODY>
</HTML>
3、效果圖預覽：
您可能感興趣的文章:
- JS與jQuery實現(xiàn)隔行變色的方法
- jQuery輕松實現(xiàn)表格的隔行變色和點擊行變色的實例代碼
- jQuery插件實現(xiàn)表格隔行變色及鼠標滑過高亮顯示效果代碼
- jQuery實現(xiàn)簡單隔行變色的方法
- jQuery隔行變色與普通JS寫法的對比
- jquery入門—選擇器實現(xiàn)隔行變色實例代碼
- 用JQuery實現(xiàn)表格隔行變色和突出顯示當前行的代碼
- 基于jQuery的的一個隔行變色，鼠標移動變色的小插件
- jQuery 行背景顏色的交替顯示(隔行變色)實現(xiàn)代碼
- jQuery 表格隔行變色代碼[修正注釋版]
- jQuery實現(xiàn)隔行變色的方法分析(對比原生JS)
相關文章
本文給大家簡單談談jQuery中的獲取高度和寬度的height和width方法，這里總結(jié)一下，方便大家更好的理解，有需要的小伙伴可以參考下。2015-07-07
jQuery基于BootStrap樣式實現(xiàn)無限極地區(qū)聯(lián)動
這篇文章主要介紹了jQuery基于BootStrap樣式實現(xiàn)無限極地區(qū)聯(lián)動的相關資料,需要的朋友可以參考下2016-08-08
jQuery-onload讓第一次頁面加載時圖片是淡入方式顯示
第一次打開一個頁面時,讓加載好的圖片先隱藏，然后再執(zhí)行動畫fadeIn，這里的load事件：當所有子元素已經(jīng)被完全加載完成時，load事件被發(fā)送到這個元素2012-05-05
jQuery怎么解析Json字符串(Json格式/Json對象)
可以利用jquery或js解析json數(shù)據(jù)，下面與大家分享下jquery解析json字符串方法，一個是解析Json格式，一個是解析Json對象，感興趣的朋友可以學習下2013-08-08
Query中click(),bind(),live(),delegate()的區(qū)別
這篇文章主要介紹了Query中click(),bind(),live(),delegate()之間的區(qū)別。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
jQuery插件開發(fā)精品教程(讓你的jQuery更上一個臺階)
這篇jQuery插件開發(fā)教程是小編見過的最詳細的了，每個解說都很好，對于想做增強插件的朋友確實不錯的參考資料，特分享下，方便需要的朋友2015-11-11
這篇文章主要介紹了jquery鼠標停止移動事件，有需要的朋友可以參考一下2013-12-12
jQuery treeview樹形結(jié)構(gòu)應用
這篇文章主要為大家詳細介紹了jQuery treeview樹形結(jié)構(gòu)應用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
本文主要介紹了jquery中bind(),live(),delegate(),on()綁定事件的不同點和相同點，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
jQuery實現(xiàn)移動端下拉展現(xiàn)新的內(nèi)容回彈動畫
這篇文章主要介紹了jQuery實現(xiàn)移動端下拉展現(xiàn)新的內(nèi)容回彈動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06