-1

我需要你的帮助，

给定下面的 html 表，我如何创建一个 javascript 函数，只需单击鼠标，就可以提醒我列标题的名称？

IE。如果我单击颜色标题，将弹出一个 JavaScript 框并警告（“颜色”）？

<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 可以大大简化这个任务。您可以为所有单元格设置事件处理程序，并在一次调用中设置事件方法。

<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 回答