Question

I’m putting together a small calendar application and need to be able to pick a range of dates.

So I require the ability to select one TD in the table that contains a month, then another TD which may or may not be on the same TR as the first.

I’ve been trying to use nextUntil to perform this but its clearly becoming unstuck with regards to intervening TR’s.

In the example below I want to add a class to all the TD tags between #range-start and #range-end:

<tr>
  <td><time datetime="2011-11-07">7</time></td>
  <td><time datetime="2011-11-08">8</time></td>
  <td id="range-start"><time datetime="2011-11-09">9</time></td>
  <td><time datetime="2011-11-10">10</time></td>
  <td><time datetime="2011-11-11">11</time></td>
  <td><time datetime="2011-11-12">12</time></td>
  <td><time datetime="2011-11-13">13</time></td>
</tr>
<tr>
  <td><time datetime="2011-11-14">14</time></td>
  <td><time datetime="2011-11-15">15</time></td>
  <td><time datetime="2011-11-16">16</time></td>
  <td id="range-end"><time datetime="2011-11-17">17</time></td>
  <td><time datetime="2011-11-18">18</time></td>
  <td><time datetime="2011-11-19">19</time></td>
  <td><time datetime="2011-11-20">20</time></td>
</tr>

Anyone got any idea how to handle this?

Answer 1

You can try this

Working Demo

var start = false;
$("table td").filter(function(){
    if(this.id == "range-start" || start){
        if(this.id == "range-end"){
            start = false;
            return true;
        }
        start = true;
    }
  return start;

}).addClass("yourClass");