热门关键字:
jquery > jquery教程 > jquery教程 > jquery 表格一行点击事件

jquery 表格一行点击事件

363
作者:管理员
发布时间:2021/5/25 18:31:49
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4793
  说明:


  实现功能:


  1、鼠标经过表格行的时候,变色


  2、控制表格表头不受影响.“经过事件不变,点击事件不变”;


  3、表格每一行有4个td,并实现只能点击第3个td,添加鼠标手形属性,而且当点击每行的第3个td的时候,把td的高度变高.


  4、而且第3个td里面,有两个元素,一个是含有类.titlef 的div元素,默认显示; 另一个是含有类.content 的


  div元素,默认隐藏; 当点击第3个td的时候,就把.content 显示出来,把当点击其他tr td的时候,还原含有


  类.content的div 变隐藏“用echo 遍历实现了”


  $(document).ready(function(){


  $(".tableLine tr:not(tr:first) td:even").css("cursor","pointer")


  $(".tableLine tr:not(tr:first) td:even ").click(function(){ ? ? ? ?$(".tableLine .content").each(function()$(this).hide(); ? ? ? ? });


  $(".tableLine tr:not(tr:first) td:even").css("height","40px").css("padding-top","0px");


  $(this).css("height","80px").css("padding-top","10px");


  $(this).children().show();


  });


  $(".tableLine tr:not(tr:first)").mouseover(function(){


  $(this).children().css("background","#efefef");


  });


  $(".tableLine tr:not(tr:first)").mouseleave(function(){


  $(this).children().css("background","#fff");


  });


  });




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐