如何通过 JavaScript 获取 html table td 单元格值? [英] 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.
单元格的值实际上是一条记录的索引，它隐藏在表格中.找到记录键后，我可以从数据库中检索整个记录.
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>针对评论(下面):
您缺少一个分号.另外，不要在循环中创建函数.
You're missing a semicolon. Also, don't make functions within a loop.
此修订版绑定了一个(单个)命名函数作为多个 <td> 元素的 click 事件处理程序，并避免了创建多个匿名的不必要开销循环中的函数(由于重复和对性能的影响，由于内存使用，这是不好的做法):
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>参考文献:
Array.prototype.forEach().document.getElementById().document.getElementsByTagName().document.querySelectorAll().EventTarget.addEventListener().Function.prototype.call().
这篇关于如何通过 JavaScript 获取 html table td 单元格值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
