jquery 操作表格实例

最新推荐文章于 2021-06-10 15:43:26 发布

会做饭的技术男

最新推荐文章于 2021-06-10 15:43:26 发布

阅读量188

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hjhjhab0iajb&title=jquery+%E6%93%8D%E4%BD%9C%E8%A1%A8%E6%A0%BC%E5%AE%9E%E4%BE%8B

版权

前端专栏收录该内容

2507 篇文章 13 订阅

订阅专栏

案例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");
    }
});