jQuery - 计数/获取行跨行的索引

Question

我试图弄清楚如何获取当前行跨度“行”的索引（即使它是行跨度的单元格）。

<table>
    <tr>
        <td rowspan="2">First</td>
        <td> First 1 1 </td>
        <td> First 2 1 </td>
    </tr>
    <tr>
         <td> First 2 1 </td>
         <td> First 2 2 </td>
    </tr>
    <tr>
        <td rowspan="2">Second</td>
        <td> Second 1 1 </td>
        <td> Second 2 1 </td>
    </tr>
    <tr>
         <td> Second 2 1 </td>
         <td> Second 2 2 </td>
    </tr>
</table>

如果我点击表格中的任何单元格，我如何计算我所在的“跨行”行？

例如，如果我点击任何“第二”单元格，我应该得到“2”，如果我点击任何“第一”单元格，我应该得到“1”。

我尝试了多种方法，包括：

row=$(this).parent().parent().children('tr').filter(function (index) {
    return $(this).children('td[rowspan]'); }).index($(this).parent());

和

row=$(this).parent().parent().children('tr:contains("td[rowspan]")')
    .parent().parent().index($(this).parent());

并且可以使用它

$row=$(this).parent();
while ($row.children('td:eq(0)').attr("rowspan").length<=0)
    $row=$row.prev();
span=$row.children('td:eq(0)').attr("rowspan");
row=Math.floor( parseInt($(this).parent().parent().children().index( $(this).parent()) )/span );

但这只有在有一个行跨度单元格的情况下才有效......并且假设所有行都具有相同的行跨度

我尝试在这些网站上工作，但无法走得太远。

jquery selector to count the number of visible table rows?
JQuery: How to select rows from a table
Table row and column number in jQuery

Answer 1

一种方法是从第一列单元格的rowspan 属性构建一个数组。从那里，您可以获取单击行的索引并遍历rowspan 数组，同时减去跨度的范围。一旦低于零，您就有了（从零开始的）索引：

$("td").click(function() {
    var $this = $(this);
    var rowIndex = $this.closest("tr").index();
    $this.closest("table").find("tr").map(function() {
        return $(this).find("td:first").attr("rowspan") || 1;
    }).each(function(index) {
        if ((rowIndex -= this) < 0) {
            alert(index + 1);  // 'index' is zero-based.
            return false;
        }
    });
});

您可以在this fiddle 进行测试。

Answer 2

var table = $('table');                     // reference of table
$('td').click(function() {
  var perent = $(this).parent();            // find parent tr
      index= table.find(perent).index();    // get index of tr
   alert( index );
});

DEMO

var table = $('table');
$('td').click(function() {
    var tdWithRowSpan = $(this).siblings('td[rowspan]').length ?  // if siblings td[rowspan] exists
                            $(this).siblings('td[rowspan]') :     // get that td
                              $(this).parent().prev('tr').find('td[rowspan]'); // else find closest td[rowspan]


    index = table.find('td[rowspan]').index(tdWithRowSpan); // get index
    alert(index);
});

DEMO

Answer 3

不确定这是否是您想要的；但请考虑将数据属性添加到您的标记中，让您的生活更轻松...

<table>
    <tr data-index="0">
        <td rowspan="2">First</td>
        <td> First 1 1 </td>
        <td> First 2 1 </td>
    </tr>
    <tr data-index="1">
         <td> First 2 1 </td>
         <td> First 2 2 </td>
    </tr>
    ...
</table>

有了这个，获取价值是微不足道的：

$(this).parent().attr("data-index");