Question

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

所以我要求能够在包含一个月的表中选择一个TD，然后选择另一个TD，它可能与第一个TD在同一个TR上。

我一直在尝试使用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

你可以试试这个

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

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

5 个答案: