使用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獲取不同行上的兩個表格單元格之間的所有表格單元格

回答

相關問題