Returning the Name of a column header [closed]

Answer 1

Try this

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

---

UPDATE

If the click should happen on the table head only

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 2

Since jQuery was not specified, I'll give a non-jQuery solution. Give an onclick event to your cells like this:

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

jQuery can greatly simplify this task. You can set the event handler for all cells and set the event method in one call.

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

(similar non-jquery concept):

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

​(function() {
    var headings = document.getElementsByTagName('th');
    for (var i = 0, amount = headings.length; i < amount; i++) {
        headings[i].addEventListener("click", function() {
            alert(this.innerText);
        });
    }
})();​

Note I have changed the td tags to th tags because that is what it is. :-) Also note that I have used a generic getElementsByTagName('th') call which should work for the HTML provided, but you may want to be more specific in a real HTML document.

Demo: http://jsfiddle.net/3G9Tx/

You may also want to look into console.log() instead of using an alert(), which is in most case easier / prefered.

UPDATE

An improved version:

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

This has some extra assignments to make sure it is cross browser compatible. It also only uses a single event handler.

Demo: http://jsfiddle.net/yRfem/ ​

Answer 4

assuming your using jquery

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

Should get you somewhere( not tested)