0

与えられたテーブル:

<table border>
    <tr>
        <th rowspan=3>H1</th>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <th rowspan=3>H2</th>
        <td>21</td>
    </tr>
    <tr>
        <td>22</td>
    </tr>
    <tr>
        <td>23</td>
    </tr>
</table>

最も近い「th」を検索する必要がある「td」にイベントがあるとします (DOM を上方にトラバースします)。たとえば、1、2、または 3 をクリックすると、H1 が返されます。21,22,23 をクリックすると、H2 が返されます。

何か案は？

4

5 に答える 5

0

What about this:

$('td').click(function () {
    if ($(this).parent().has('th').length > 0) {
        $(this).parent().find('th').css('background', 'red');
        //alert('first row!');
    } else {
        $(this).parent().prevAll('tr').has('th').first().find('th').css('background', 'red');
    }
})

Basicially i first check if you have selected the first row, the row that contains the <th>.
If that is not the case i'll search for all previous <tr> elements (Going to top of DOM structure). Whenever one has a <th> element it will be in the .prevAll query. I'll select the first one that was selected.
Now we select the <th> in the selected <tr>.

I hope it's not "over the top" ^^

jsFFiddle

于 2013-11-08T15:59:09.067 に答える
0

プラグインはやり過ぎかもしれませんが、これは機能します:

http://jsfiddle.net/eVpHG/

$.fn.myTh = function () {
    var $elem = this.first();    

    var $th = $elem.siblings('th');    
    if ($th.length)
        return $th;

    else
        return $elem.parent('tr').prev('tr').children('th');

};
于 2013-11-08T15:45:49.330 に答える
0

チェックしている HTML 構造はさまざまな分岐をカバーする可能性があるため、再帰関数を記述して兄弟th要素をチェックし、存在しない場合は最も近いtr要素の兄弟の子をチェックする必要があります。これを試して：

$('td').click(function() {
    alert(findTh($(this).closest('tr')));
});

function findTh($row) {
    var $th = $('th', $row), 
        $prevRow = $row.prev('tr');

    if ($th.length) {
        return $th.text();
    }
    else if ($prevRow.length) {
        return findTh($prevRow);
    }
    else {
        return '';
    }
}

フィドルの例

于 2013-11-08T15:39:16.337 に答える