Javascript & HTML : get the first value of an array row

Question

I have this Javascript function which "alerts" the content of a clicked cell, wherever I click on my HTML array :

var table = document.getElementById("tableID");
if (table != null) {
   for (var i = 0; i < table.rows.length; i++) {
      for (var j = 0; j < table.rows[i].cells.length; j++)
         table.rows[i].cells[j].onclick = function () {tableText(this);};
   }
}
function tableText(tableCell) {alert(tableCell.innerHTML);}

My goal is returning only the value of the first cell of the clicked row (I've tried to manage it but I'm a newbie in Javascript...). Thanks in advance !

One approach would be to bind an event listener to the table like this: `table.addEventListener('click',function(e){`…`})` and in that callback function going up the DOM tree from `e.target` (i. e. `e.target.parentNode.parentNode…` until you hit a ``) and then of that `tr` returning `.children[0]`. It depends on whether you want to use a loop or jQuery or other libraries. — Sebastian Simon, Jun 02 '15 at 12:39
use jQuery in combination with https://api.jquery.com/siblings/ and https://api.jquery.com/eq/ — rst, Jun 02 '15 at 12:39

score 2 · Accepted Answer · answered Jun 02 '15 at 12:44

You could also use jquery

$("#tableID tbody tr").click(function() {
    var first_td = $(this).closest("tr") // Finds the closest <tr> 
        .find("td:first") // Finds the first <td>
        .text(); // Gets its text. 
    console.log("Selected first_td is  : ", first_td);
});

score 1 · Answer 2 · answered Jun 02 '15 at 12:39

1

You can do it by getting first child from parent element. Just use tableCell.parentNode.firstChild.innerHTML instead tableCell.innerHTML

answered Jun 02 '15 at 12:39

Дмитрий Кужель

13
3

What if one layer of `parentNode` isn’t sufficient? – Sebastian Simon Jun 02 '15 at 12:40
Of course there was the suggestion that the cell is already in the row element, otherwise you need look over parent nodes until it reaches the node. – Дмитрий Кужель Jun 02 '15 at 12:50

score 1 · Answer 3 · answered Jun 02 '15 at 12:43

1

function tableText(tableCell) {
    alert(tableCell.parentElement.childNodes[0].innerHTML);
}

Fiddle for you to play with: https://jsfiddle.net/5z8q30jt/

answered Jun 02 '15 at 12:43

Steen

2,749
2
20
36

Raúl Martín · Answer 4 · 2015-06-02T13:02:51.327

If you don't want use jquery:

http://codepen.io/luarmr/pen/qdrOev

function addEvent(elem, event, fn) {
  //http://stackoverflow.com/questions/10149963/adding-event-listener-cross-browser
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.call(elem, window.event));   
        });
    }
}

var table = document.getElementById('test');
addEvent(table, 'click', function(e){
  var node = e.srcElement;
  while(node.tagName.toLowerCase() !== 'tr' && node.tagName.toLowerCase() !== 'body') {
    node = node.parentNode;
  }
  if(node.tagName.toLowerCase() === 'tr') {
    var td = node.getElementsByTagName('td')[0];
    alert(td.innerHTML)
  }

});

Javascript & HTML : get the first value of an array row

4 Answers4