Click table row and get value of all cells

Question

I don\'t know JQuery, so I\'m hoping there is a way to do this in pure Javascript.

I need to click on a table row and get the value of each cell in that row. Here i

Answer 1

There is no need to add ids or add multiple event handlers to the table. One click event is all that is needed. Also you should use thead and tbody for your tables to separate the heading from the content.

var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
    e = e || window.event;
    var data = [];
    var target = e.srcElement || e.target;
    while (target && target.nodeName !== "TR") {
        target = target.parentNode;
    }
    if (target) {
        var cells = target.getElementsByTagName("td");
        for (var i = 0; i < cells.length; i++) {
            data.push(cells[i].innerHTML);
        }
    }
    alert(data);
};

    

        

            
OCB
            
Area
            
Name
            
Cell #
            
Nickname
        
    
    

        

            
275
            
Layton Installation
            
Benjamin Lloyd
            
(801) 123-456
            
Ben
        
    

Example:

http://jsfiddle.net/ZpCWD/