zoukankan      html  css  js  c++  java
  • jquery 操作表格实例

    案例1:隔行变色,滑动,点击变色以(选中取消效果)(addClass(),removeClass(),toggleClass()

    Html:
    <h4>1.隔行变行</h4>
        <table width=500 class="tab01">
            <tr>
                <th>name</th>
                <th>特长</th>
                <th>QQ</th>
            </tr>
            <tr>
                <td>eric</td>
                <td>擅长java</td>
                <td>249056406</td>
            </tr>
            <tr>
                <td>mike</td>
                <td>擅长js,css,ps</td>
                <td>249056406</td>
            </tr>
            <tr>
                <td>jick</td>
                <td>擅长sql,oracle</td>
                <td>249056406</td>
            </tr>
        </table>
    Css:
    table{font-size:12px;border-collapse:collapse;border:1px solid #A9C9E2;}
      td,th{padding:5px;border:1px solid #A9C9E2;}
      tr{cursor:pointer;}
      .tab01{background:#EEFAFF;}
      tr.even{background:#F0FBEB;}
      tr.highlight,td.highlight,th.highlight{background:#FFFFDD;}  //highlight类供js动态添加
      tr.selected{background:#C2ECA7;}
    (注意:因为tr.even设置了颜色,highlight必须指明tr、td、th,不然tr.even不起效果)
    js:
      $('.tab01 tr:even').addClass('even');
                //滑动
                $('.tab01 tr:not(:first)').hover(function(){
                    $(this).addClass('highlight');
                }, function(){
                    $(this).removeClass('highlight');
                });
                //点击变色
                $('.tab01 tr:not(:first)').click(function(){
                    $(this).toggleClass('selected');
                });
                //表头滑动
                $('.tab01 th').hover(function(){
                    var colindex = $(this).index();
                    $('.tab01 td:nth-child(' + (colindex + 1) + '),.tab01 th:nth-child(' + (colindex + 1) + ')').addClass('highlight');  //选中列添加highlight类            
                }, function(){
                    $('.tab01 tr').children().removeClass('highlight');
                });

    2.如上表格中添加一列按钮,选中行按钮打钩以及行变色(hasClass,removeClass,removeAttr,)

    Js:
    //默认选中的添加样式
     $('.tab02 input[type="checkbox"]:checked').parents('tr').addClass('selected');
    $(".tab02 tr:not(:first)").click(function(){   
         if($(this).hasClass("selected")){
             $(this).removeClass("selected");
             $(this).find('input[type="checkbox"]').removeAttr("checked");
         }
        else{
            $(this).addClass("selected");
            $(this).find('input[type=checkbox]').attr("checked","checked");
        }
    });
  • 相关阅读:
    处理了一个“服务器能ping得通,但telnet连接失败”导致数据库登录不了的问题
    解决了一个oracle登录缓慢的问题
    今天解决了一个mysql远程登录和本机ip登录都失败的问题
    c++笔记
    c语言笔记
    常见并发与系统设计
    linux网络IO笔记
    linux文件IO全景解析
    linux网络协议笔记
    长大后才懂的蜡笔小新 ​​​​
  • 原文地址:https://www.cnblogs.com/qinyi173/p/4989997.html
Copyright © 2011-2022 走看看