javascript - Use JQuery to get all table cells between two table cells on different rows - Stack Overflow

admin管理员组

文章数量:1356938

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 being 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?

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 being 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?

• javascript
• jquery
• html-table

Share Improve this question Follow edited Sep 12, 2018 at 17:17 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Nov 29, 2011 at 14:54 Rich CRich C 13911 silver badge1010 bronze badges 3

• You may want to either clean up your HTML or show more of it. It would be good to put these rows in a table with an id and a body tag. This would make some of the jQuery selectors more efficient and precise. – arb Commented Nov 29, 2011 at 15:16
• It's just a snippet for illustrative purposes :) I thought that was obvious! – Rich C Commented Nov 29, 2011 at 15:24
• If you would include the whole table structure with IDs, then peoples jQuery selectors would be more accurate to what you actually have. It's obvious what you are trying to do, but peoples answers could be more detailed and accurate with the whole table markup. – arb Commented Nov 29, 2011 at 15:30

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

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

The easiest thing I can e up with is selecting all tds and then using .index and .slice: http://jsfiddle/AMBFZ/.

var first = $("td:eq(3)"), // first td
    last = $("td:eq(9)");  // last td

var allTds = $("td"); // all tds

var indexFirst = allTds.index(first), // index of first td in all tds
    indexLast = allTds.index(last);   // index of last td in all tds

// only tds between first and last (last should be included but .slice
// includes first and excludes last, so add one)
console.log( allTds.slice(indexFirst, indexLast + 1) );

var fromIndex = $("#calendar td").index($("#calendar #range-start"));
var toIndex = $("#calendar td").index($("#calendar #range-end"));

$("#calendar td").slice(fromIndex, toIndex).css("color", "Red");

Some slight modifications to @pimvdb solution:

function PaintDates() {
    var cells = $("td"),
        startIndex = allTds.index($("#range-start")),
        endIndex = allTds.index($("#range-end"));

    allTds.slice(startIndex, endIndex + 1).css('background-color', 'red');
}

Native solution if you're interested:

var cells = document.getElementById('the_table').getElementsByTagName( 'td' ),
    i = 0, curr, result = [];

while( curr = cells[i], ++i ) {
    if( curr.id === 'range-end' ) {
        result.push( curr ); 
        i = -1;
    } else if( result.length || curr.id === 'range-start' ) result.push( curr );
}

本文标签： javascriptUse JQuery to get all table cells between two table cells on different rowsStack Overflow