4

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

<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选择器来计算可见表行的数量？
jQuery：如何从表格中选择行 jQuery 中的
表格行号和列号

4

3 回答 3

3 
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 );
});

演示

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

演示

于 2012-06-24T05:18:23.607 回答
3

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

你可以在这个 fiddle中测试它。

于 2012-06-24T05:23:21.243 回答
2

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

<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");
于 2012-06-24T05:09:49.993 回答