jQuery展示表格點擊變色、全選、刪除

更新時間：2017年01月05日 11:11:29 投稿：lijiao

這篇文章主要為大家詳細介紹了jQuery展示表格點擊變色、全選、刪除的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

看著書上的代碼，自己敲了好一陣，發(fā)現(xiàn)自己優(yōu)化后的代碼比書上的更簡潔，功能也更多，貼出來，留后用。

功能：

表格行點擊變背景色、選擇刪除、全選刪除、圖片原圖顯示

效果顯示：

代碼貼上：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta name="keywords" content=" keywords" />
  <meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.7.2.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:pointer}
  table tr td span{float:left;padding-left:12px}
  table tr th{background-color:#ccc;height:32px;background-color:#fff}
  .clsImg{position:absolute;border:solid 1px #ccc;padding:3px;background-color:#eee;display:none;cursor:pointer}
  .btn{border:solid 1px #666;padding:2px;width:50px;filter:progd:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#ECE9D8);cursor:pointer}
</style>
<body>
<script type="text/javascript">
  $(function(){
    //點擊表格行變色
    $('tr').click(function(){
      if((this.style.backgroundColor=='')||(this.style.backgroundColor=='rgb(255, 255, 255)')){
        this.style.cssText='background-color:#CCC';
      }else{
        this.style.cssText='background-color:#fff';
      }
    })

    //放大圖顯示
    $('.a').mousemove(function(e){
      $('#imgTip').show().attr('src',this.src);
      $('#imgTip').css({'top':(e.pageY+5)+'px','left':(e.pageX+5)+'px'});
    });
    $('.a').mouseover(function(e){
      $('#imgTip').show().attr('src',this.src);
      $('#imgTip').css({'top':(e.pageY+5)+'px','left':(e.pageX+5)+'px'});
    });
    $('.a').mouseout(function(){
      $('#imgTip').hide();
    });

    //點擊全選
    $('#checkAll').click(function(){
      if(this.checked){
        $(':checkbox').attr('checked',true);
      }else{
        $(':checkbox').attr('checked',false);
      }
    });

    //刪除部分與全部
    $('.btn').click(function(){
      if($('#checkAll').attr('checked')){
        $('table tr td :checkbox:not("#checkAll")').each(function(index){
          $('#'+this.value).remove();
        });
      }else{
        $(':checkbox:not("#checkAll")').each(function(index){
          if(this.checked){
            $('#'+this.value).remove();
          }
        })
      }
    });
  });
</script>

<table>
  <tr>
    <th>選項</th>
    <th>編號</th>
    <th>封面</th>
    <th>購書人</th>
    <th>性別</th>
    <th>夠書價</th>
  </tr>
  <tr id="0">
    <td><input type="checkbox" name="" id="checkbox1" value="0" /></td>
    <td>1001</td>
    <td><img src="1.jpg" title="" alt="" class="a" /></td>
    <td>李小明</td>
    <td>男</td>
    <td>35.6元</td>
  </tr>
  <tr id="1">
    <td><input type="checkbox" name="" id="checkbox2" value="1" /></td>
    <td>1002</td>
    <td><img src="2.jpg" title="" alt="" class="a" /></td>
    <td>王明</td>
    <td>男</td>
    <td>28.9元</td>
  </tr>
  <tr id="2">
    <td><input type="checkbox" name="" id="checkbox3" value="2" /></td>
    <td>1003</td>
    <td><img src="3.jpg" title="" alt="" class="a" /></td>
    <td>皮特</td>
    <td>女</td>
    <td>34.3元</td>
  </tr>
  <tr id="3">
    <td><input type="checkbox" name="" id="checkbox3" value="3" /></td>
    <td>2356</td>
    <td><img src="4.jpg" title="" alt="" class="a" /></td>
    <td>愛丁堡</td>
    <td>男</td>
    <td>23.3元</td>
  </tr>
</table>
<table>
  <tr>
    <td style="text-align:left;height:28px">
      <span><input type="checkbox" name="" id="checkAll" />全選</span>
      <span><input type="button" value="刪除" class="btn" /></span>
    </td>
  </tr>
</table>
<img src="1.jpg" title="" alt="" id="imgTip" class="clsImg" />
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

jQuery新的事件綁定機制on()示例應用
從jQuery1.7開始，jQuery引入了全新的事件綁定機制，on()和off()兩個函數(shù)統(tǒng)一處理事件綁定，下面通過示例為大家介紹下
2014-07-07
jQuery實現(xiàn)的自動加載頁面功能示例
這篇文章主要介紹了jQuery實現(xiàn)的自動加載頁面功能,結合簡單實例形式分析了jQuery針對頁面元素的動態(tài)加載與屬性操作相關技巧,需要的朋友可以參考下
2016-09-09
jQuery實現(xiàn)表單input中提示文字value隨鼠標焦點移進移出而顯示或隱藏的代碼
表單input中提示文字value隨鼠標焦點移進移出而顯示或隱藏的jQuery代碼
2010-03-03
jquery Banner輪播選項卡
這篇文章主要為大家詳細介紹了jquery Banner輪播選項卡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
淺談ajax在jquery中的請求和servlet中的響應
下面小編就為大家分享一篇淺談ajax在jquery中的請求和servlet中的響應，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
深入淺出 jQuery中的事件機制
本文重點給大家介紹jquery中的事件機制，涉及到onload和ready兩者的區(qū)別介紹，非常不錯，具有參考借鑒價值，感興趣的朋友一起看下吧
2016-08-08
使用jQuery實現(xiàn)購物車
這篇文章主要為大家詳細介紹了使用jQuery實現(xiàn)購物車，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-10-10
jQuery實現(xiàn)的頁面彈幕效果【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)的頁面彈幕效果,涉及jQuery事件響應與頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2018-08-08
Jquery實現(xiàn)移動端控制DIV拖拽
這篇文章主要為大家詳細介紹了Jquery實現(xiàn)移動端控制DIV拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02
Jquery高級應用Deferred對象原理及使用實例
這篇文章主要介紹了Jquery高級應用Deferred對象原理及使用實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-05-05