案例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
(#换成@)。