0 
<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 值（即星期一）。

这些和是动态创建的。

4

2 回答 2

0

如果你使用 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/

于 2012-11-19T12:23:39.217 回答
0

假设在您的函数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;
于 2012-11-19T12:24:05.310 回答