如何通过JavaScript获取html table td单元格值？

Question

我有一个用动态数据创建的HTML表,无法预测其中的行数.我想要做的是在单击一行时获取单元格的值.我知道使用td onclick但我不知道如何访问Javascript函数中的单元格值.

单元格的值实际上是记录的索引,它隐藏在表中.找到记录键后,我可以从db检索整个记录.

如果我不知道单击的表的行索引和列索引,如何获取单元格值？

Answer 1

不要使用内联JavaScript,将您的行为与数据分开,并且更容易处理.我建议如下:

var table = document.getElementById('tableID'),
    cells = table.getElementsByTagName('td');

for (var i=0,len=cells.length; i<len; i++){
    cells[i].onclick = function(){
        console.log(this.innerHTML);
        /* if you know it's going to be numeric:
        console.log(parseInt(this.innerHTML),10);
        */
    }
}

var table = document.getElementById('tableID'),
  cells = table.getElementsByTagName('td');

for (var i = 0, len = cells.length; i < len; i++) {
  cells[i].onclick = function() {
    console.log(this.innerHTML);
  };
}

th,
td {
  border: 1px solid #000;
  padding: 0.2em 0.3em 0.1em 0.3em;
}

<table id="tableID">
  <thead>
    <tr>
      <th>Column heading 1</th>
      <th>Column heading 2</th>
      <th>Column heading 3</th>
      <th>Column heading 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>43</td>
      <td>23</td>
      <td>89</td>
      <td>5</td>
    </tr>
    <tr>
      <td>4</td>
      <td>3</td>
      <td>0</td>
      <td>98</td>
    </tr>
    <tr>
      <td>10</td>
      <td>32</td>
      <td>7</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

JS小提琴概念验证.

修改后的方法,以回应评论(如下):

你错过了一个分号.另外,不要在循环中创建函数.

此修订将(单个)命名函数绑定为click多个<td>元素的事件处理程序,并避免在循环中创建多个匿名函数的不必要开销(由于重复和由于内存使用而对性能的影响,这是不好的做法):

function logText() {
  // 'this' is automatically passed to the named
  // function via the use of addEventListener()
  // (later):
  console.log(this.textContent);
}

// using a CSS Selector, with document.querySelectorAll()
// to get a NodeList of <td> elements within the #tableID element:
var cells = document.querySelectorAll('#tableID td');

// iterating over the array-like NodeList, using
// Array.prototype.forEach() and Function.prototype.call():
Array.prototype.forEach.call(cells, function(td) {
  // the first argument of the anonymous function (here: 'td')
  // is the element of the array over which we're iterating.

  // adding an event-handler (the function logText) to handle
  // the click events on the <td> elements:
  td.addEventListener('click', logText);
});

function logText() {
  console.log(this.textContent);
}

var cells = document.querySelectorAll('#tableID td');

Array.prototype.forEach.call(cells, function(td) {
  td.addEventListener('click', logText);
});

th,
td {
  border: 1px solid #000;
  padding: 0.2em 0.3em 0.1em 0.3em;
}

<table id="tableID">
  <thead>
    <tr>
      <th>Column heading 1</th>
      <th>Column heading 2</th>
      <th>Column heading 3</th>
      <th>Column heading 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>43</td>
      <td>23</td>
      <td>89</td>
      <td>5</td>
    </tr>
    <tr>
      <td>4</td>
      <td>3</td>
      <td>0</td>
      <td>98</td>
    </tr>
    <tr>
      <td>10</td>
      <td>32</td>
      <td>7</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

JS小提琴概念验证.

参考文献:

• Array.prototype.forEach().
• document.getElementById().
• document.getElementsByTagName().
• document.querySelectorAll().
• EventTarget.addEventListener().
• Function.prototype.call().

Answer 2

这是我的解决方案

var cells = Array.prototype.slice.call(document.getElementById("tableI").getElementsByTagName("td"));
for(var i in cells){
    console.log("My contents is \"" + cells[i].innerHTML + "\"");
}

Answer 3

您可以使用：

<td onclick='javascript:someFunc(this);'></td>

通过传递这个参数，您可以通过函数参数访问 DOM 对象。