itRef.cn技术参考网站

当前位置: 主页 > JS >

javascript获取单元格所在行的行对象实例

时间:2012-03-18 21:47来源:未知 作者:wiwi 点击:
问题背景: 有时我们会碰到这样一个场景,单元格内的按钮触发的事件处理中,需要获取单元格所在的表格行,但有时又不确定按钮在单元格内的DOM结构的层次。 解决方法: DOM结构: table id = tempTable tbody tr id = row_01 td button onclick = btnclick(th

问题背景:

有时我们会碰到这样一个场景,单元格内的按钮触发的事件处理中,需要获取单元格所在的表格行,但有时又不确定按钮在单元格内的DOM结构的层次。

解决方法:

DOM结构:

  1. <table id="tempTable"> 
  2.     <tbody> 
  3.         <tr id="row_01"> 
  4.             <td> 
  5.                 <button onclick="btnclick(this);" >Save Row</button> 
  6.             </td> 
  7.         </tr> 
  8.         <tr id="row_02"> 
  9.             <td> 
  10.                 <button onclick="btnclick(this);" >Save Row</button> 
  11.             </td> 
  12.         </tr> 
  13.     </tbody> 
  14. </table> 

1. 通过原生parentNode循环获取

  1. function btnclick(e) {  
  2.     var obj=e.parentNode; 
  3.     while(obj!=null){ 
  4.         if(obj.tagName.toLowerCase()=='tr'){ 
  5.             break
  6.         } 
  7.         obj=obj.parentNode; 
  8.     } 
  9.     alert(obj.id);  

2. 通过jquery的对象.closest('tr')获取

  1. function btnclick(e) {  
  2.     var currentRow = $(e).closest('tr');  
  3.     alert(currentRow.attr('id'));  
  4. }  

实例:


 提示:您可以先修改部分代码再运行
(责任编辑:wiwi) 转载请注明 来源于itRef.cn技术参考网站:
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
推荐内容