{"id":6291,"date":"2010-05-04T04:26:48","date_gmt":"2010-05-04T11:26:48","guid":{"rendered":"http:\/\/css-tricks.com\/?p=6291"},"modified":"2014-04-22T08:31:34","modified_gmt":"2014-04-22T15:31:34","slug":"row-and-column-highlighting","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/row-and-column-highlighting\/","title":{"rendered":"Table Row and Column\u00a0Highlighting"},"content":{"rendered":"<div class=\"explanation\">In mid-2009 I did <a href=\"https:\/\/css-tricks.com\/video-screencasts\/66-table-styling-2-fixed-header-and-highlighting\/\">a screencast<\/a> about tables which featured how to do row and column highlighting with jQuery. The method in the video isn&#8217;t nearly as efficient as it could be, so this is an update to that. Shout out to Bronislav Klucka who contacted me about the idea.<\/div>\n<p>Attaching events to table cells is the quintessential example, and also read like a history for event handling in jQuery.<\/p>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/examples\/RowColumnHighlighting\/example-one.php\">Original demo<\/a> (version < jQuery 1.3 ) - Using .hover() on every single &lt;td><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/examples\/RowColumnHighlighting\/example-two.php\">Live demo<\/a> ( jQuery 1.3 <= version < jQuery 1.4.2 ) - Using .live() on &lt;td>&#8216;s<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/examples\/RowColumnHighlighting\/example-three.php\">Delegate demo<\/a> ( jQuery 1.4.2 <= version ) - Using .delegate() on &lt;table><\/li>\n<\/ul>\n<p><!--more--><\/p>\n<h3>HTML of typical table<\/h3>\n<p>Let&#8217;s assume this markup. There are five columns, and so there are five <tt>&lt;colgroup><\/tt>s. Colgroups allow us to style an entire column without needing to manipulate individual table cells (as table cells in a particular column share no common unique parent).<\/p>\n<pre><code class=\"html\">&lt;table&gt;\r\n    &lt;colgroup&gt;&lt;\/colgroup&gt;\r\n    &lt;colgroup&gt;&lt;\/colgroup&gt;\r\n    &lt;colgroup&gt;&lt;\/colgroup&gt;\r\n    &lt;colgroup&gt;&lt;\/colgroup&gt;\r\n    &lt;colgroup&gt;&lt;\/colgroup&gt;\r\n\t&lt;thead&gt;\r\n\t    &lt;tr&gt;\r\n\t        &lt;th&gt;&lt;\/th&gt;\r\n\t        &lt;th&gt;&lt;\/th&gt;\r\n\t        &lt;th&gt;&lt;\/th&gt;\r\n\t        &lt;th&gt;&lt;\/th&gt;\r\n\t        &lt;th&gt;&lt;\/th&gt;\r\n\t    &lt;\/tr&gt;\r\n\t&lt;\/thead&gt;\r\n\t&lt;tbody&gt;\r\n    \t\t&lt;tr&gt;\r\n    \t\t\t&lt;td&gt;&lt;\/td&gt;\r\n    \t\t\t&lt;td&gt;&lt;\/td&gt;\r\n    \t\t\t&lt;td&gt;&lt;\/td&gt;\r\n    \t\t\t&lt;td&gt;&lt;\/td&gt;\r\n    \t\t\t&lt;td&gt;&lt;\/td&gt;\r\n    \t\t&lt;\/tr&gt;\r\n    \t\t&lt;tr&gt;\r\n    \t\t\t&lt;td&gt;&lt;\/td&gt;\r\n    \t\t\t&lt;td&gt;&lt;\/td&gt;\r\n    \t\t\t&lt;td&gt;&lt;\/td&gt;\r\n    \t\t\t&lt;td&gt;&lt;\/td&gt;\r\n    \t\t\t&lt;td&gt;&lt;\/td&gt;\r\n    \t\t&lt;\/tr&gt;\r\n    \t\t&lt;tr&gt;\r\n    \t\t\t&lt;td&gt;&lt;\/td&gt;\r\n    \t\t\t&lt;td&gt;&lt;\/td&gt;\r\n    \t\t\t&lt;td&gt;&lt;\/td&gt;\r\n    \t\t\t&lt;td&gt;&lt;\/td&gt;\r\n    \t\t\t&lt;td&gt;&lt;\/td&gt;\r\n    \t\t&lt;\/tr&gt;\r\n    \t&lt;\/tbody&gt;\r\n&lt;\/table&gt;<\/code><\/pre>\n<h3>CSS<\/h3>\n<p>Nothing much to see here, just that we will have a class name ready to handle the actual styling of &#8220;current&#8221; rows and columns.<\/p>\n<pre><code class=\"css\">.hover { background-color: #eee; }<\/code><\/pre>\n<p>It&#8217;s best to handle the actual styling information through CSS rather than directly in the JavaScript. <\/p>\n<blockquote><p>You gotta keep &#8217;em separated<\/p><\/blockquote>\n<p><em>&#8211; Offspring<\/em><\/p>\n<h3>Best Method: Delegate<\/h3>\n<p>For jQuery 1.4.2+, the best bet is going to be delegate. Here is the two second overview. You attach a single event listener (efficient!) to the table itself specifying which elements qualify. If anywhere inside the table is clicked, it checks if that click was inside one of the specified elements. If there is a match, it fires the function. <\/p>\n<pre><code class=\"javascript\">$(\"table\").delegate('td','mouseover mouseout', function(e) {\r\n   \/\/ do stuff\r\n});<\/code><\/pre>\n<p>Our &#8220;do stuff&#8221; is applying a class name to the row and colgroup, when they are &#8220;hovered&#8221; over only. &#8220;hover&#8221; isn&#8217;t a real event though, the real events are <tt>mouseover<\/tt> and <tt>mouseleave<\/tt>. Delegate will take a space-separated list of events. Within the function we can test which type of even was fired and act accordingly.<\/p>\n<pre><code class=\"javascript\">$(\"table\").delegate('td','mouseover mouseleave', function(e) {\r\n    if (e.type == 'mouseover') {\r\n      $(this).parent().addClass(\"hover\");\r\n      $(\"colgroup\").eq($(this).index()).addClass(\"hover\");\r\n    }\r\n    else {\r\n      $(this).parent().removeClass(\"hover\");\r\n      $(\"colgroup\").eq($(this).index()).removeClass(\"hover\");\r\n    }\r\n});<\/code><\/pre>\n<p>Since delegate is watching the entire table, if new table rows\/cells are added dynamically later, they will still behave with this code.<\/p>\n<h3>Still good method: Live<\/h3>\n<p>Post jQuery 1.3, but pre jQuery 1.4.2, the best method for event handling in a situation like this was .live(). Remember how with delegate we watched the table itself for the specified events? With live, we watch the entire &lt;body> for those events. This has the distinct benefit of allowing new rows\/cells to be added dynamically without the need to re-attach events, but with less efficiency than delegate.<\/p>\n<p>However it should be noted that should entire new table be added to the page dynamically, live would continue to work while delegate would not, as the new table would not have delegate attached to it.<\/p>\n<pre><code class=\"javascript\">$('td').live('mouseover', function(){\r\n    var i = $(this).prevAll('td').length;\r\n    $(this).parent().addClass('hover')\r\n    $($cols[i]).addClass('hover');\r\n\r\n}).live('mouseout', function(){\r\n    var i = $(this).prevAll('td').length;\r\n    $(this).parent().removeClass('hover');\r\n    $($cols[i]).removeClass('hover');\r\n});<\/code><\/pre>\n<h3>The old and kinda bad method<\/h3>\n<p>Before we had access to live or delegate, or only method was to bind the events directly every single table cell. jQuery still had a helper function for it, but it still meant adding an event listener for every single solitary cell (inefficient!, e.g. lots of browser memory usage). Not to mention that if new table rows or cells were added dynamically, they wouldn&#8217;t have any of the events attached them that their brethren do. <\/p>\n<pre><code class=\"javascript\">$(\"td\").hover(function() {\r\n   \/\/ do stuff\r\n}, function() {\r\n   \/\/ do stuff\r\n});<\/code><\/pre>\n<p>If you&#8217;d like to see all the old nastiness, <a href=\"https:\/\/css-tricks.com\/examples\/RowColumnHighlighting\/js\/example-one.js\">it&#8217;s here<\/a>.<\/p>\n<h3>Demo and Download<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/examples\/RowColumnHighlighting\/example-one.php\">Original demo<\/a> (version < jQuery 1.3 ) - Using .hover() on every single &lt;td><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/examples\/RowColumnHighlighting\/example-two.php\">Live demo<\/a> ( jQuery 1.3 <= version < jQuery 1.4.2 ) - Using .live() on &lt;td>&#8216;s<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/examples\/RowColumnHighlighting\/example-three.php\">Delegate demo<\/a> ( jQuery 1.4.2 <= version ) - Using .delegate() on &lt;table><\/li>\n<\/ul>\n<p><a class=\"button\" href=\"https:\/\/css-tricks.com\/examples\/RowColumnHighlighting.zip\">Download Files<\/a><\/p>\n<h3>Have a more complex table?<\/h3>\n<p>With colspans and rowspans and whatnot? Gajus Kuizinas&#8217;s <a href=\"https:\/\/github.com\/gajus\/wholly\" rel=\"noopener\">Wholly project<\/a> might be able to help you with highlighting in those cases.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In mid-2009 I did a screencast about tables which featured how to do row and column highlighting with jQuery. The method in the video isn&#8217;t nearly as efficient as it could be, so this is an update to that. Shout out to Bronislav Klucka who contacted me about the idea. Attaching events to table cells [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4,20],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":194642,"url":"https:\/\/css-tricks.com\/simple-css-row-column-highlighting\/","url_meta":{"origin":6291,"position":0},"title":"Simple CSS-Only Row and Column Highlighting","date":"January 30, 2015","format":false,"excerpt":"Highlighting rows of a table is pretty darn easy in CSS. tr:hover { background: yellow; } does well there. But highlighting columns has always been a little trickier, because there is no single HTML element that is parent to table cells in a column. A dash of JavaScript can handle\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":19423,"url":"https:\/\/css-tricks.com\/footable-a-jquery-plugin-for-responsive-data-tables\/","url_meta":{"origin":6291,"position":1},"title":"FooTable: a jQuery Plugin for Responsive Data Tables","date":"December 13, 2012","format":false,"excerpt":"Brad Vincent introduces a new jQuery plugin for helping with responsive data tables with his friend Steve.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6557,"url":"https:\/\/css-tricks.com\/feature-table-design\/","url_meta":{"origin":6291,"position":2},"title":"Feature Table Design","date":"June 21, 2010","format":false,"excerpt":"I ran into the feature table design from Shopify over on Pattern Tap and I was like DAMN SHOPIFY, that is one sexy table. I was inspired to try and replicate it. First in Photoshop, then in HTML\/CSS. Recreating cool stuff you find on the web is definitely an excercise\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5994,"url":"https:\/\/css-tricks.com\/grid-accordion-with-jquery\/","url_meta":{"origin":6291,"position":3},"title":"Grid Accordion with jQuery","date":"March 22, 2010","format":false,"excerpt":"Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/infogridexample.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":716,"url":"https:\/\/css-tricks.com\/improved-current-field-highlighting-in-forms\/","url_meta":{"origin":6291,"position":4},"title":"Improved Current Field Highlighting in Forms","date":"April 21, 2008","format":false,"excerpt":"VIEW DEMO As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms to indicate the currently active (or \"focused\") field. Some browsers (Safari\/Opera) have decided that is so important, that it take matters into it's own hands and\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":15891,"url":"https:\/\/css-tricks.com\/responsive-data-table-roundup\/","url_meta":{"origin":6291,"position":5},"title":"Responsive Data Table Roundup","date":"January 11, 2012","format":false,"excerpt":"There has been a bunch of takes on responsive data tables since I first published about it. View Demo The idea of the original was to abandon the grid layout of the table and make each cell its own line. Each of those lines is labeled with a pseudo element.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/01\/zurb-responsive-tables.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/6291"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=6291"}],"version-history":[{"count":17,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/6291\/revisions"}],"predecessor-version":[{"id":168434,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/6291\/revisions\/168434"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=6291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=6291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=6291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}