Question

<table id="foo" border="1">
  <tr>
    <td rowspan="3" class="date">Monday</td>
    <td>Cell A1 <a href="#" class="edit">edit</a></td>
  </tr>
  <tr>
    <td>Cell A2 <a href="#" class="edit">edit</a></td>
  </tr>
  <tr>
    <td>Cell A3 <a href="#" class="edit">edit</a></td>
  </tr>
  <tr>
    <td rowspan="3" class="date">Tuesday</td>
    <td>Cell B1 <a href="#" class="edit">edit</a></td>
  </tr>
  <tr>
    <td>Cell B2 <a href="#" class="edit">edit</a></td>
  </tr>
  <tr>
    <td>Cell B3 <a href="#" class="edit">edit</a></td>
  </tr>
</table>

在上表中，如何获取父TD的rowSpan值？例如，如果我单击单元格A3的编辑链接，将调用Javascript函数。在该函数中，我需要父TD的rowSpan值（即星期一）。

这些是动态创建的。

Answer 1

如果你正在使用jQuery试试这个：

$("#foo").on('click', '.edit', function(){
    var tr = $(this).closest('tr'), 
        rowspan = 0,
        text, td;

    while(tr.length && !rowspan ) {
        td = tr.find('td:first');
        rowspan = td.attr('rowspan');
        tr = tr.prev();            
    }

    alert(td.text());
})

现场演示：http://jsfiddle.net/bJfKL/1/

Answer 2

假设您的函数this是对a元素的引用，您可以这样做：

var tr = this.parentNode.parentNode;

tr = tr.parentNode.rows[tr.rowIndex - (tr.rowIndex % 3)];

alert(tr.cells[0].innerHTML);

或者，如果不能保证每3行，您可以遍历并测试rowSpan。

var tr = this.parentNode.parentNode;

while (tr && tr.cells[0].rowSpan === 1)
    tr = tr.parentNode.rows[tr.rowIndex - 1];

alert(tr.cells[0].innerHTML);

FWIW，你应该利用多个<tbody>元素。这使事情变得更加简单。

<table id="foo" border="1">
    <tbody>
        <tr> 
            <td rowspan="3" class="date">Monday</td> 
            <td>Cell A1 <a href="#" class="edit">edit</a></td> 
        </tr>
        <tr> 
            <td>Cell A2 <a href="#" class="edit">edit</a></td> 
        </tr>
        <tr> 
            <td>Cell A3 <a href="#" class="edit">edit</a></td> 
        </tr>
    </tbody>
    <tbody>
        <tr> 
            <td rowspan="3" class="date">Tuesday</td> 
            <td>Cell B1 <a href="#" class="edit">edit</a></td> 
        </tr>
        <tr> 
            <td>Cell B2 <a href="#" class="edit">edit</a></td> 
        </tr>
        <tr> 
            <td>Cell B3 <a href="#" class="edit">edit</a></td> 
        </tr>
    </tbody>
</table>

然后就是：

var tr = this.parentNode.parentNode.parentNode.rows[0];

tr.cells[0].innerHTML;

如何获取rowSpan TD的ID

2 个答案: