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

});