0

これはかなり単純なはずですが、つまずきそうです。テーブルのセルにドロップダウンがあります。その値が変更されたら、javascript 関数を呼び出して、そのドロップダウンを関数に渡します。そこからテーブルを取得するにはどうすればよいですか？コード例:

<table><tr>
<td>DATA</td>
<td><select id='leadState' onChange='updateData(this)'><option selected='selected' value='new'>New</option><option value='old'>Contacted</option></select></td>
</tr>
</table>

JavaScript:

function updateData(select) {
    var table = select.parentNode.parentNode.parentNode;
    var row = select.parentNode.parentNode;
    var cell = select.parentNode;
}

これがテーブルを正しく返さないのはなぜですか?

4

2 に答える 2

1

要素を忘れているためtbody(これはオプションですが、すべてではないにしてもほとんどのブラウザは、要素tableをラップするために に追加しtrます。別の方法を試してくださいparentNode:

function updateData(select) {
                // select -> td  -> tr      -> tbody   -> table
    var table = select.parentNode.parentNode.parentNode.parentNode;
    var row = select.parentNode.parentNode;
    var cell = select.parentNode;
}

JS フィドルのデモ。

tableそして、すべての変数をトラバースする必要はありません。

function updateData(select) {
    var td = select.parentNode,
        tr = td.parentNode,
        tbody = tr.parentNode,
        table = tbody.parentNode;
}

JS フィドルのデモ。

プレーンな JavaScript に固執し、要素を取得する際に DOM を手動で反復処理したくないと仮定すると、単純なプレーンな JavaScript の実装がclosest()次のようになります。

HTMLElement.prototype.closest = function (selector) {
    var self = this.length ? this[0] : this;
    while (self.tagName.toLowerCase() !== selector.toLowerCase() && self.tagName.toLowerCase() !== 'body') {
        self = self.parentNode;
    }
    return self.tagName.toLowerCase() == 'body' ? this : self;
}

function updateData(select) {
    var td = select.closest('td'),
        tr = select.closest('tr'),
        table = select.closest('table');
    console.log(td, tr, table);
}

JS フィドルのデモ。

于 2013-07-02T18:47:11.753 に答える