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 に答える