-1

あなたの助けが必要です、

以下のhtmlテーブルを前提として、マウスをクリックすると列ヘッダーの名前を通知するjavascript関数を作成するにはどうすればよいですか？

つまり。COLORSヘッダーをクリックすると、JavaScriptボックスがポップアップしてアラート（ "COLORS"）になりますか？

<html>

<head>

</head>

<body>

<table border="1" cellspacing="1" width="500">
    <tr>
        <td>FRUITS</td>
        <td>COLORS</td>
        <td>VEGGIES</td>
        <td>NUMBERS</td>
    </tr>
    <tr>
        <td>apples</td>
        <td>red</td>
        <td>carrots</td>
        <td>123</td>
    </tr>
    <tr>
        <td>oranges</td>
        <td>blue</td>
        <td>celery</td>
        <td>456</td>
    </tr>
    <tr>
        <td>pears</td>
        <td>green</td>
        <td>brocoli</td>
        <td>789</td>
    </tr>
    <tr>
        <td>mangos</td>
        <td>yellow</td>
        <td>lettuce</td>
        <td>098</td>
    </tr>
</table>

</body>

</html>
4

4 に答える 4

3

これを試して

var td     = document.getElementsByTagName("td"),
    titles = document.getElementsByTagName("th");

for ( var i = 0; i < td.length; i++ ) {   
    td[i].addEventListener("click", function() {
        alert( titles[this.cellIndex].innerHTML );
    }, false);
}

デモ

アップデート

クリックがテーブル ヘッドのみで発生する場合

var titles = document.getElementsByTagName("th");

for ( var i = 0, len = titles.length; i < len; i++ ) {   
    titles[i].addEventListener("click", function() {
        alert( this.innerHTML );
    }, false);
}

デモ

于 2012-10-22T17:10:52.567 に答える
2 
​(function() {
    var headings = document.getElementsByTagName('th');
    for (var i = 0, amount = headings.length; i < amount; i++) {
        headings[i].addEventListener("click", function() {
            alert(this.innerText);
        });
    }
})();​

tdタグをタグに変更したことに注意してくださいth。:-) またgetElementsByTagName('th')、提供された HTML に対して機能するはずの一般的な呼び出しを使用しましたが、実際の HTML ドキュメントではより具体的にしたい場合があることに注意してください。

デモ: http://jsfiddle.net/3G9Tx/

console.log()を使用する代わりに調べることもできますalert()。これは、ほとんどの場合、より簡単で好まれます。

アップデート

改良版:

function getTextFromHeading(e) {
    var e = e || window.event,
        target = e.target || e.srcElement,
        text = target.textContent || target.innerText;  

    if (target.tagName.toLowerCase() === 'th') {
        alert(text);
    }
}

(function() {
    var table = document.getElementsByTagName('table');
    if (table[0].addEventListener) {
        table[0].addEventListener('click', getTextFromHeading);
    } else if (table[0].attachEvent) {
        table[0].attachEvent('onclick', getTextFromHeading);
    }
}());

これには、ブラウザー間の互換性を確保するための追加の割り当てがいくつかあります。また、単一のイベント ハンドラーのみを使用します。

デモ: http://jsfiddle.net/yRfem/ </p>

于 2012-10-22T17:05:04.480 に答える
1

jQuery が指定されていないため、jQuery 以外のソリューションを提供します。次のようにセルにイベントを与えonclickます。

<td onclick="alert(this.innerHTML);">FRUITS</td>

jQuery を使用すると、このタスクを大幅に簡素化できます。すべてのセルにイベント ハンドラーを設定し、1 回の呼び出しでイベント メソッドを設定できます。

<tr id="headerRow">
    <td>FRUITS</td>
    <td>COLORS</td>
    <td>VEGGIES</td>
    <td>NUMBERS</td>
</tr>

js:

$(function() {  //on DOM loaded method
  $('#headerRow td').click(function() {
      alert(this.innerHTML);
  });
});

http://jsfiddle.net/xzmMj/

(同様の非 jquery コンセプト):

//execute at end of document or in a DOM ready/loaded handler
var arr = document.getElementById('headerRow')
    .getElementsByTagName("td");


for(var i = 0; i < arr.length; i++) {
    (function(_i){
        arr[_i].onclick = function() { alert(this.innerHTML); };
    })(i);
}
于 2012-10-22T17:05:15.443 に答える
0

あなたがjqueryを使用していると仮定して

$('table tr').each(function(index){
  $(this+" td").each(function(index2){
      $(this).click(function(){
         alert($('table td:eq('+index2+')').text());
      });
  });
});

あなたをどこかに連れて行くはずです（テストされていません）

于 2012-10-22T17:08:14.103 に答える