《实现点击获取table表格数据的原生JavaScript方法》

在网页开发中，经常会用到表格来展示数据。有时候需要根据用户点击的行来获取该行对应的数据。本文将介绍如何使用原生JavaScript来实现点击获取table表格数据的功能。

代码实现：

HTML代码如下：

姓名
   年龄
   性别
  
 
 
  
   张三
   20
   男
  
  
   李四
   25
   女
  
  
   王五
   30
   男

JavaScript代码如下：

var table = document.getElementById('myTable');
table.onclick = function(event) {
 var target = event.target;
 while (target.tagName !== 'TR')
  target = target.parentNode;
 
 var cells = target.cells;
 var name = cells[0].innerText;
 var age = cells[1].innerText;
 var gender = cells[2].innerText;
 console.log('姓名：' + name + '，年龄：' + age + '，性别：' + gender);
}

当用户点击表格中的某一行时，表格会触发click事件。在事件处理函数中，首先获取事件触发元素（即用户点击的元素），然后通过循环向上查找其父元素，直到找到TR元素。最后，获取该行所有单元格的数据（使用innerText属性），并输出到控制台上。

相似文章
• 原生JavaScript点击获取table表格数据，JavaWeb和Spring哪个更难？
  原生JavaScript点击获取table表格数据，JavaWeb和Spring哪个更难？
  
  

友情链接
• 网站定制开发
• 帮你发
• 小蓄群站获客
• 雅圣洁家政