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

我正在制作一个小型日历应用程序，并且需要能够选择一系列日期。使用JQuery获取不同行上的两个表格单元格之间的所有表格单元格

因此，我需要能够在包含一个月的表格中选择一个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>

任何人有任何想法如何处理这个问题？

来源

2011-11-29 Rich C

你可能想要么清理你的HTML或节目更多。将这些行放在一个带有id和body标签的表格中会很好。这将使一些jQuery选择器更加高效和精确。 – arb

这只是用于说明目的的一个片段:)我认为这很明显！ –

如果你将整个表结构包含ID，那么人们的jQuery选择器会更准确地实现你的实际。这显然是你想要做的，但人们的答案可以用整个表格标记更加详细和准确。 – arb

你可以试试这个

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

来源

2011-11-29 15:06:56 ShankarSangoli

这很好，谢谢！ :) –

我能想出的选择所有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));

来源

2011-11-29 15:07:30 pimvdb

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

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

来源

2011-11-29 15:11:24

稍作修改，以@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'); 
}

来源

2011-11-29 15:14:59 arb

原生解决方案，如果你有兴趣：

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

来源

2011-11-29 16:13:53 RightSaidFred

对于任何绊倒这一点并且需要它的人来说，这是很好的选择。谢谢！ –

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

回答

相关问题