你的位置:首页 > 软件开发 > Java > jquery 操作表格实例

jquery 操作表格实例

发布时间:2015-11-24 00:00:24
案例1:隔行变色,滑动,点击变色以(选中取消效果)(addClass(),removeClass(),toggleClass())Html:<h4>1.隔行变行</h4> <table width=500 > <tr> ...

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

Html:<h4>1.隔行变行</h4>  <table width=500 >    <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');      });

原标题:jquery 操作表格实例

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录