使用JQuery获取不同行上的两个表格单元格之间的所有表格单元格

Question

我正在制作一个小型日历应用程序，并且需要能够选择一系列日期。

因此，我需要能够在包含一个月的表格中选择一个TD，然后选择另一个TD，它可能与第一个TD相同或不同。

我一直在尝试使用nextUntil来执行此操作，但对于介入TR的操作而言，它显然变得不稳固。

在下面我想添加一个类＃范围内启动和＃范围端之间的所有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

你可以试试这个

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

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