Question

我需要你的帮助，

鉴于下面的html表，如何创建一个javascript函数，只需点击鼠标，就会提醒我列标题的名称？

IE中。如果我点击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>

Answer 1

(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/

Answer 2

试试这个

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);
}

DEMO

<强>更新

如果点击仅在桌面上发生

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

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

DEMO

Answer 3

由于未指定jQuery，我将提供非jQuery解决方案。像这样向您的单元格发送onclick事件：

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

jQuery可以大大简化这项任务。您可以为所有单元格设置事件处理程序，并在一次调用中设置事件方法。

<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);
}

Answer 4

假设你使用jquery

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

应该让你到处（未经测试）

返回列标题的名称

4 个答案: