使用JQuery獲取不同行上兩個表單元格之間的所有表單元格

Question

我正在整理一個小型日歷應用程序，需要能夠選擇一系列日期。

因此，我需要能夠在包含一個月的表中選擇一個TD，然后再選擇一個可能與第一個TD相同或不相同的TD。

我一直在嘗試使用nextUntil來執行此操作，但是就介入TR而言，它顯然變得毫無意義。

在下面的示例中，我想為＃range-start和＃range-end之間的所有TD標簽添加一個類：

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

有人知道如何處理嗎？

Answer 1

你可以試試這個

工作演示

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

Answer 2

我能想到的最簡單的方法是選擇所有td ，然后使用.index和.slice ： http : //jsfiddle.net/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) );

Answer 3

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

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

Answer 4

對@pimvdb解決方案進行一些細微修改：

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

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

Answer 5

如果您有興趣，請使用本機解決方案：

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