Используйте JQuery, чтобы получить все ячейки таблицы между двумя ячейками таблицы в разных строках. - PullRequest
Новая
       2

Используйте JQuery, чтобы получить все ячейки таблицы между двумя ячейками таблицы в разных строках.

3 голосов
/ 29 ноября 2011

Я собираю небольшое приложение-календарь, и мне нужно выбрать диапазон дат.

Поэтому мне требуется возможность выбрать один TD в таблице, содержащей месяц, затем другой TD, который может или не может быть в том же TR, что и первый.

Я пытался использовать nextUntil для выполнения этого, но он явно стал неприлипающим в отношении промежуточных ТР.

В приведенном ниже примере я хочу добавить класс ко всем тегам TD между # range-start и # 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>

Кто-нибудь знает, как с этим справиться?

Ответы [ 5 ]

5 голосов
/ 29 ноября 2011

Вы можете попробовать это

Рабочая Демо 

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");
2 голосов
/ 29 ноября 2011

Самая простая вещь, которую я могу придумать, это выбрать все 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) );
1 голос
/ 29 ноября 2011

Нативное решение, если вам интересно: 

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 );
}
1 голос
/ 29 ноября 2011

Некоторые небольшие изменения в решении @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');
}
1 голос
/ 29 ноября 2011 
var fromIndex = $("#calendar td").index($("#calendar #range-start"));
var toIndex = $("#calendar td").index($("#calendar #range-end"));

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