《实现点击获取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哪个更难？
  
  

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