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

});

Javascript＆amp; HTML：获取数组行的第一个值

4 个答案: