微客导航 » 文章资讯 » jQuery实现选中行变色效果(实例讲解)

jQuery实现选中行变色效果(实例讲解)

2024-02-16 20:48:02 226

//点击复选框添加样式









$(function(){
$("tbodytr:even").addClass("even");
$("tbodytr:odd").addClass("odd");
$(":checkbox").change(function(){
if($(this).is(":checked")){
$(this).parents("tr").addClass("selected");
}else{
$(this).parents("tr").removeClass("selected");
}
});
//初始化默认选中色selected样式
$(":checkbox").each(function(){
if($(this).is(":checked")){
$(this).parents("tr").addClass("selected");
}
})
})







姓名
性别
暂住地





张山
男
浙江宁波



李四
女
浙江杭州



王五
男
湖南长沙



找六
男
浙江温州



Rain
男
浙江杭州



MAXMAN
女
浙江杭州

姓名	性别	暂住地
张山	男	浙江宁波
李四	女	浙江杭州
王五	男	湖南长沙
找六	男	浙江温州
Rain	男	浙江杭州
MAXMAN	女	浙江杭州

//点击行添加样式









$(function(){
$("tbodytr:even").addClass("even");
$("tbodytr:odd").addClass("odd");
$("tbodytr").click(function(){
varhasselect=$(this).hasClass("selected");
if(hasselect){
$(this).removeClass("selected");
$(this).find("input").attr("checked",false);
}else{
$(this).addClass("selected");
$(this).find("input").attr("checked",true);
}
})
$('tbody>tr:has(:checked)').addClass('selected');
//$(":checkbox").each(function(){
//if($(this).is(":checked")){
//$(this).parents("tr").addClass("selected");
//}
//})

})







姓名
性别
暂住地





张山
男
浙江宁波



李四
女
浙江杭州



王五
男
湖南长沙



找六
男
浙江温州



Rain
男
浙江杭州



MAXMAN
女
浙江杭州

姓名	性别	暂住地
张山	男	浙江宁波
李四	女	浙江杭州
王五	男	湖南长沙
找六	男	浙江温州
Rain	男	浙江杭州
MAXMAN	女	浙江杭州

以上这篇jQuery实现选中行变色效果(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

jQuery实现选中行变色效果(实例讲解)

热门推荐

随机推荐