2011-03-04 132 views
2

我正在使用jQuery数据表生成html表。我设置了一个回调来为链接创建一个额外的列(编辑,删除等)。使用jquery最接近选择第一个​​值

我设置了绑定功能来检测点击,这是工作。

我遇到的问题是点击时选择最靠近的行的第一列的文本/值。

下面是与该类绑定并检测到单击的片段。


$(".drop").bind('click', function(e) 
{ 
    var val = $(e.target).closest('td:first').text(); 
    alert(val);        
}); 

HTML表身又一代


<tbody> 
      <tr class="odd"> 
       <td>[email protected]</td> 

       <td>[email protected]</td> 

       <td>1000</td> 

       <td><a href="#" class="drop">Delete</a></td> 
      </tr> 

      <tr class="even"> 
       <td>[email protected]</td> 

       <td></td> 

       <td></td> 

       <td><a href="#" class="drop">Delete</a></td> 
      </tr> 

      <tr class="odd"> 
       <td></td> 

       <td>[email protected]</td> 

       <td>17340</td> 

       <td><a href="#" class="drop">Delete</a></td> 
      </tr> 

      <tr class="even"> 
       <td>[email protected]</td> 

       <td></td> 

       <td></td> 

       <td><a href="#" class="drop">Delete</a></td> 
      </tr> 

      <tr class="odd"> 
       <td></td> 

       <td>[email protected]</td> 

       <td>10000201142345292781</td> 

       <td><a href="#" class="drop">Delete</a></td> 
      </tr> 

      <tr class="even"> 
       <td>[email protected]</td> 

       <td></td> 

       <td></td> 

       <td><a href="#" class="drop">Delete</a></td> 
      </tr> 

      <tr class="odd"> 
       <td>[email protected]</td> 

       <td></td> 

       <td></td> 

       <td><a href="#" class="drop">Delete</a></td> 
      </tr> 

      <tr class="even"> 
       <td>[email protected]</td> 

       <td>[email protected]</td> 

       <td>100000723143211905</td> 

       <td><a href="#" class="drop">Delete</a></td> 
      </tr> 

      <tr class="odd"> 
       <td>[email protected]</td> 

       <td></td> 

       <td></td> 

       <td><a href="#" class="drop">Delete</a></td> 
      </tr> 

      <tr class="even"> 
       <td></td> 

       <td>[email protected]</td> 

       <td>8197906212343</td> 

       <td><a href="#" class="drop">Delete</a></td> 
      </tr> 
     </tbody> 

+0

你能还包括从你的HTML为例行表? – 2011-03-05 00:07:43

+0

点击的元素是什么? – 2011-03-05 00:09:35

+0

增加了表...对不起 – Peter 2011-03-05 00:13:21

回答

6

这应做到:

var val = $(e.target).closest('td').siblings(':first-child').text(); 

现场演示:http://jsfiddle.net/simevidas/JZwxD/

+0

工作就像一个魅力!谢谢! – Peter 2011-03-05 00:15:29

+0

@Peter你甚至没有让我先发布我的演示':)' – 2011-03-05 00:17:01

+1

@Peter另外,请注意,如果你将点击处理程序直接绑定到ANCHOR元素,那么你不需要'e.target' ...'这个'也可以工作(如我的演示所示)。 – 2011-03-05 00:18:45