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

<table class='list'>
    <thead>
        <tr>
            <th class='tech'>OCB</th>
            <th class='area'>Area</th>
            <th class='name'>Name</th>
            <th class='cell'>Cell #</th>
            <th class='nick'>Nickname</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>275</td>
            <td>Layton Installation</td>
            <td>Benjamin Lloyd</td>
            <td>(801) 123-456</td>
            <td>Ben</td>
        </tr>
    </tbody>
</table>

Example:

http://jsfiddle.net/ZpCWD/

Answer 2

Check this fiddle link

HTML:

<table id="rowCtr" class='list'>
    <thead>
        <tr>
            <th class='tech'>OCB</th>
            <th class='area'>Area</th>
            <th class='name'>Name</th>
            <th class='cell'>Cell #</th>
            <th class='nick'>Nickname</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>275</td>
            <td>Layton Installation</td>
            <td>Benjamin Lloyd</td>
            <td>(801) 123-456</td>
            <td>Ben</td>
        </tr>
    </tbody>
</table>

JAVASCRIPT:

init();
function init(){

    addRowHandlers('rowCtr');

}

function addRowHandlers(tableId) {
    if(document.getElementById(tableId)!=null){
        var table = document.getElementById(tableId);
        var rows = table.getElementsByTagName('tr');
        var ocb = '';
        var area = '';
        var name = '';
        var cell = '';
        var nick = '';
        for ( var i = 1; i < rows.length; i++) {

            rows[i].i = i;
            rows[i].onclick = function() {

                ocb = table.rows[this.i].cells[0].innerHTML;                
                area = table.rows[this.i].cells[1].innerHTML;
                name = table.rows[this.i].cells[2].innerHTML;
                cell = table.rows[this.i].cells[3].innerHTML;
                nick = table.rows[this.i].cells[4].innerHTML;
                alert('ocb: '+ocb+' area: '+area+' name: '+name+' cell: '+cell+' nick: '+nick);
            };
        }
    }
}

Answer 3

This shows the row's first cell which is clicked according to dataTr.querySelectorAll("td")[0].innerText;

document.querySelector("#myTable").addEventListener("click",event => {
    let dataTr = event.target.parentNode;
    let dataRes = dataTr.querySelectorAll("td")[0].innerText;
    console.log(dataRes);
});

Answer 4

var elements  = document.getElementsByTagName('td');
for (var i =0; i < elements.length; i++) {
   var cell_id = 'id' + i;
   elements[i].setAttribute('id', cell_id);
}

Maybe put something like this in function your onclick links to from the tr?

Answer 5

$("tr").click(function () {
    var rowItems = $(this).children('td').map(function () {
        return this.innerHTML;
    }).toArray();
});