How to select those td in a table?

Question

I've got a calendar in static html (example below) and I want to select whole week on hoover (just add '.active' class and on click it should return the first and last day of the week selected by clicking on it.

I think I should use .on() event, since it's dynamically loaded by a plugin. I tried many jQuery selectors, but I can't find the proper one. Please, help me out, I'd like to learn how to do this in the best way :).

<div class="datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-top"> <div class="datepicker-days" style="display: block;"> <table class=" table-condensed"> <tbody> <tr> <td class="day active old">29</td> <td class="day old">30</td> <td class="day">1</td> <td class="day">2</td> <td class="day">3</td> <td class="day">4</td> <td class="day">5</td> </tr> <tr> <td class="day">6</td> <td class="day">7</td> <td class="day">8</td> <td class="day">9</td> <td class="day">10</td> <td class="day">11</td> <td class="day">12</td> </tr> <tr> <td class="day">13</td> <td class="day">14</td> <td class="day">15</td> <td class="day">16</td> <td class="day">17</td> <td class="day">18</td> <td class="day">19</td> </tr> <tr> <td class="day">20</td> <td class="day">21</td> <td class="day">22</td> <td class="day">23</td> <td class="day">24</td> <td class="day">25</td> <td class="day">26</td> </tr> <tr> <td class="day">27</td> <td class="day">28</td> <td class="day">29</td> <td class="day">30</td> <td class="day">31</td> <td class="day new">1</td> <td class="day new">2</td> </tr> <tr> <td class="day new">3</td> <td class="day new">4</td> <td class="day new">5</td> <td class="day new">6</td> <td class="day new">7</td> <td class="day new">8</td> <td class="day new">9</td> </tr> </tbody> </div></div>

Regards.

imbondbaby · Accepted Answer · 2014-07-13 20:12:14Z

Try this:

JQuery:

If you want to add class on click

$(document).on('click', 'tr', function () { $('.active').removeClass('active'); $(this).addClass('active') });

If you want it to add class on hover

$(document).on('mouseover', 'tr', function () { $('.active').removeClass('active'); $(this).addClass('active') });

CSS:

.active{ color:red; }

JSFiddle Demo - onClick

JSFiddle Demo - Hover

"I think I should use .on() event, since it's dynamically loaded by a plugin" This jQuery doesn't account for that, otherwise a good answer.

EternalHour · Accepted Answer · 2014-07-13 19:23:56Z

0

Seems that you're looking for something like this.

$(document).on("click", "td", function(event){ \\your code here });

answered Jul 13, 2014 at 19:23

EternalHour

8,6776 gold badges40 silver badges58 bronze badges

1 Comment

tomdavies Over a year ago

yes, I can write something like this ;) I need a deeper implementation ,since I need to select whole weeks (so it means all I need to add class '.active. to all td in the hovered week).

charlietfl · Accepted Answer · 2014-07-13 19:32:19Z

Whole weeks are quite simple. When you click a td look within it's parent

$(document).on('click', 'td.day', function () { $('.selected').removeClass('selected');/* clear previous class clicks*/ $(this).parent().children().addClass('selected'); });

For hover use something like:

$(document).on('mouseenter mouseleave', 'tr', function () { $(this).toggleClass('rowHoverClass'); })

DEMO

user1129360 · Accepted Answer · 2014-07-13 19:39:02Z

I believe you are looking for something like this:

$(document).on("click", "tr", function() { $(this).addClass("active"); var first_day = $(this).find("td").first(); var last_day = $(this).find("td").last(); console.log(first_day, last_day); });

jsFiddle: http://jsfiddle.net/x5Af9/

Collectives™ on Stack Overflow

How to select those td in a table?

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Related