• jQuery实例——展示表格点击变色、全选、删除


    看着书上的代码,自己敲了好一阵,发现自己优化后的代码比书上的更简洁,功能也更多,贴出来,留后用~~

    功能:

    表格行点击变背景色、选择删除、全选删除、图片原图显示

    效果显示:

    代码贴上:

    <!DOCTaYPE 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>
    <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>



  • 相关阅读:
    Integer中计算int位数的方法
    Spark学习---常见的RDD转和行动操作
    Spark学习---RDD编程
    《教父》中的经典台词以及英文原版
    关于MATSIM中,如何关闭自动加载dtd的问题
    源发行版8需要目标发行版1.8
    关于Mysql中GROUP_CONCAT函数返回值长度的坑
    【转】通过xml处理sql语句时对小于号与大于号的处理转换
    XmlDocument根据节点的属性值获取节点
    【转】使用SevenZipSharp压缩、解压文件
  • 原文地址:https://www.cnblogs.com/picaso/p/2435752.html
Copyright © 2020-2023  润新知