Shulou(Shulou.com)06/01 Report--

This article mainly explains "jquery how to realize the click event in one line of the table". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the idea of Xiaobian and go deep into it slowly to study and learn "jquery how to realize the click event in one line of the table" together.

Description:

Function:

1. When the mouse passes through the table row, it changes color.

2. The control table header is not affected. "After the event does not change, click the event does not change";

3. Each row of the table has 4 td, and only click the 3rd td to add the mouse hand attribute, and when clicking the 3rd td of each row, the height of td becomes higher.

4, and the third td inside, there are two elements, one is a div element containing the class.titlef, displayed by default; the other is containing the class.content

div element, hidden by default; when you click the third td, the.content is displayed, and when you click other tr td, the content is restored.

div variable hidden class.content "realized with echo traversal"

$(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");

});

});

Thank you for reading, the above is "jquery how to achieve a table line click event" content, after the study of this article, I believe we have a deeper understanding of how to achieve a table line click event jquery, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.