如何通过JavaScript获取html table td cell值？ [英] How to get html table td cell value by JavaScript?

问题描述

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

I have an HTML table created with dynamic data and cannot predict the number of rows in it. What I want to do is to get the value of a cell when a row is clicked. I know to use td onclick but I do not know how to access the cell value in the Javascript function.

单元格的值实际上是记录的索引和它藏在桌子里。找到记录键后，我可以从db中检索整个记录。

The value of the cell is actually the index of a record and it is hidden in the table. After the record key is located I can retrieve the whole record from db.

如果我不知道表的行索引和列索引，如何获取单元格值我点击了什么？

How to get the cell value if I do not know the row index and column index of the table that I clicked?

推荐答案

不要使用内联JavaScript，将您的行为与数据分开，它会变得更容易处理。我建议如下：

Don't use in-line JavaScript, separate your behaviour from your data and it gets much easier to handle. I'd suggest the following:

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小提琴概念验证。

修改后的方法，以回应评论（下面）：

A revised approach, in response to the comment (below):

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

You're missing a semicolon. Also, don't make functions within a loop.

此修订版将（单个）命名函数绑定为单击多个< td> 元素的事件处理程序，并避免在循环中创建多个匿名函数的不必要开销（这是由于重复而导致的不良做法以及由于内存使用而对性能的影响）：

This revision binds a (single) named function as the click event-handler of the multiple <td> elements, and avoids the unnecessary overhead of creating multiple anonymous functions within a loop (which is poor practice due to repetition and the impact on performance, due to memory usage):

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（） 。


• < a href =https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call\"rel =nofollow noreferrer> Function.prototype.call （） 。

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

这篇关于如何通过JavaScript获取html table td cell值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！