Question

假设我有一个这样的表：

<table>
    <tr><td class="this-is-a-label">Label Cell</td></tr>
    <tr><td>Detail 1</td></tr>
    <tr><td class="selected">Detail 2</td></tr>
</table>

我希望能够从“已选定”单元格中获取之前的“标签单元格”。

我的jQuery脚本应该是这样的：

$('.selected').each(function() {
    var label = $(this).parent().prev('tr td.this-is-a-label');
    //... do what I need with the label ...
});

但它不起作用。

有人有任何建议吗？

Answer 1

你可以这样做：

$('.selected').each(function() {
  var label = $(this).closest('tr').prevAll('tr:has(td.this-is-a-label):first')
                     .children('td.this-is-a-label');
  //... do what I need with the label ...
});

这不是理想的，它是一个相当昂贵的DOM遍历，如果你可以保证它总是落后2行，你可以这样做：

$(this).closest('tr').prev().prev().children('td.this-is-a-label')

...这要快得多，它只取决于你对标记的假设和保证，如果有任何确定性，你绝对可以让它更快。

Answer 2

怎么样：

var label = 
  $('.selected').parent().prevAll('tr').children('td.this-is-a-label')[0];

Answer 3

$("td.selected").parents("table").find("td.this-is-a-label").text();

Answer 4

以下是您对<tr>和<td> dom元素的引用方式：

$("tr:has(td.selected)").each(function(i, trSel){
    var trLabel = $(trSel).prevAll("tr:has(td.this-is-a-label)").get(0);

    var tdSel = $(trSel).children("td.selected").get(0);
    var tdLabel = $(trLabel).children("td.this-is-a-label").get(0);

    console.log(trSel, tdSel);
    console.log(trLabel, tdLabel);
});

Answer 5

为响应这篇文章我创建了一个小插件，目的是找到一个与当前单元格相关的单元格：

$.fn.cellFromCell = function(r,c,upOrDown) {
    if(upOrDown == 'down') {
        return $(this).parent().prevAll(':eq(' + r + ')').find('td:eq(' + c + ')').text();
    } else {
        return $(this).parent().nextAll(':eq(' + r + ')').find('td:eq(' + c + ')').text();
    }
}

alert($('.selected').cellFromCell(1, 0, 'down')); // alerts "Label Cell"
alert($('.this-is-a-label').cellFromCell(0, 0)); // alerts "Detail 1"

我使用你的html进行简单的测试用例。你可以在这里弄乱它：http://jsfiddle.net/6kfVL/3/

Answer 6

生成表时，您可以通过在HTML5 id标记中编码来轻松实现：

$`1`
  Names ID.x Weight ID.y Weight2
1 Frank   A1    186   A1     190
2 Kevin   A1    159   A1     170
3  Rich   A1    200   A1     180
4  Earl <NA>     NA   A1     255
5   Kip <NA>     NA   A1     240

$`2`
   Names ID.x Weight ID.y Weight2
1   Bill   B2    177 <NA>      NA
2  Bobby   B2    310 <NA>      NA
3    Sam   B2    105   B2     120
4    Tim   B2    155 <NA>      NA
5 Donald <NA>     NA   B2     205
6   Eric <NA>     NA   B2     100

然后您可以使用该值，甚至对关联的“父”执行操作：

<table id="myTable">
    <tr id="label1"><td class="this-is-a-label">Label Cell</td></tr>
    <tr data-parent-label-id="label1"><td>Detail 1</td></tr>
    <tr data-parent-label-id="label1"><td class="selected">Detail 2</td>   </tr>
</table>

jQuery查找具有特定类的单元格的上一个表行

6 个答案: