1

jQueryを使用せずにテーブルJavaScriptで選択したテーブルセルを取得する方法は? jQuery を使用すると、決定は非常に簡単ですが、jQuery を使用しない JavaScript では、方法がわかりません。私はテーブルを持っています:

<table><tr onmouseover="toolnote(this)"><td><td><td></tr></table>

「onmouseover」イベントをテーブルのすべてのセルにバインドする必要がありますが、このイベントをすべてのセルに書き込むと、非常に読みにくくなります。したがって、「onmouseover」を子を介してタグにバインドし、選択したセルを決定する必要があります。しかし、子インデックスを取得する方法がわかりません。

JS コード:

function toolnote(el){
    var tt = el.getElementsByTagName('td')
    alert(tt[0].innerHTML);
}

このサンプル イベントでは、0-index にバインドします。

誰か助けて？

4

2 に答える 2

1

疑問に思う！

  1. 関数名として持っていて、要素toolnote()を呼び出しtooltip()ています。これはタイプミスですか？
  2. ;ステートメントにa がありません。

簡単な変更:

function toolnote(el){
    var tt = el.getElementsByTagName('td'); // «--- You are missing a ;
    alert(tt[0].innerText);
}

または、jQueryを使用すると、さらに簡単になります。

function toolnote(el){
    alert($(el).children("td").first().text());
}

各セルでこれが必要な場合は、次のようになります。

<tr><td onmouseover="toolnote(this)"></td><td onmouseover="toolnote(this)"></td><td onmouseover="toolnote(this)"></td></tr>

JavaScript を次のようにします。

function toolnote(el){
    alert(this.innerText);
}

Firefoxの場合：

function toolnote(el){
    alert(this.textContent);
}

そして、これが理由です。このクロスブラウザースクリプティングの問題をより適切に処理するため、 jQueryを使用する方が良いと私は言いました。

1 行で:

function toolnote(el) {
    var e = el.getElementsByTagName("td");
    if (e.textContent)
        for (i = 0; i < e.length; i++) e[i].onclick = function () {
            alert(this.textContent); // Firefox
        }
    else
        for (i = 0; i < e.length; i++) e[i].onclick = function () {
            alert(this.innerText); // IE
        }
}
于 2012-11-29T11:26:09.997 に答える