Javascript и HTML: получить первое значение в строке массива

Question

У меня есть эта функция Javascript, который «оповещения» содержимое щелкнутой ячейки, где бы я нажимаю на моем HTML массива:

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

Моя цель возвращается только значение первой ячейки щелкнутой строки (я пытался ее обработать, но я новичок в Javascript ...). Заранее спасибо !

Answer 1

Вы также можете использовать 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); 
}); 

Answer 2

Вы можете сделать это, получив первый ребенок из родительского элемента. Просто используйте tableCell.parentNode.firstChild.innerHTML вместо tableCell.innerHTML

Answer 3

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

скрипку играть с: https://jsfiddle.net/5z8q30jt/

Answer 4

Если вы не хотите использовать 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) 
    } 

});