尝试当我按下一个按钮

Question

我创建一个表与2行的PHP文件和一个按钮上的每个最后<td>获得TD的价值：

<table id="filterTableMsg" border="1" class="TF"> 
<tbody><tr><th>Message Title</th><th>Message</th><th>Schedule Date</th><th>share</th> </tr> 

<tr class="row_hover"> 
<td>hello</td> 
<td>hello message</td> 
<td>2014-04-09 00:11:51</td> 
<td><button id="FBshare">share it!</button></td> 
</tr> 

<tr class="row_hover"> 
<td>hello again</td> 
<td>hello new message</td> 
<td>2014-04-08 10:15:21</td> 
<td><button id="FBshare">share it!</button></td> 
</tr> 

</tbody> 
</table> 

当我按下一个按钮（id="FBshare"）我需要获取行索引，然后使用jQuery获取cell [0]，cell [1]和cell [2]的值。

我尝试用这个代码来解决这个问题，但它返回“未定义”：

$(function() {  
/*when i click on the FBshare button*/ 
    $(document).on('click', '#FBshare', function(e){ 
     e.preventDefault(); 
     var mytable = $('#filterTableMsg tr:eq(1) td');//for example to get the 2nd row 
      alert(mytable.eq(2).html());//here i try to get the html of the 2nd cell but i get 'undifined 
    }); 

我可以通过编写此获得按钮的行的索引：

alert($(this).closest('tr').index()); // but I can't make them work all together. 

有没有人面临相同或相似的问题？

请举个手

Answer 1

你可以做这样的事情：

<table id="filterTableMsg" border="1" class="TF"> 
    <tbody><tr><th>Message Title</th><th>Message</th><th>Schedule Date</th><th>share</th> </tr> 

    <tr id="row_1" class="row_hover"> 
     <td>hello</td> 
     <td>hello message</td> 
     <td>2014-04-09 00:11:51</td> 
     <td> 
      <button data-row="row_1" class="FBshare">share it!</button> 
     </td> 
    </tr> 

    <tr id="row_2" class="row_hover"> 
     <td>hello again</td> 
     <td>hello new message</td> 
     <td>2014-04-08 10:15:21</td> 
     <td> 
      <button data-row="row_2" class="FBshare">share it!</button> 
     </td> 
    </tr> 

    </tbody> 
</table> 

在HTML，我改变了FBshare一类（因为你不能在一个有效的DOM重复的ID）并添加了一个数据行属性。这也被添加为TR元素的ID，并且应该很容易用PHP生成。

$('.FBshare').click(function(){ 
    var rowID = $(this).attr('data-row'); 
    $('#' + rowID + 'td:not(:last-child)').each(function(){ 
     alert($(this).text()); 
    }); 
}); 

然后单击事件，这势必会在新类抓住数据行属性的值，创建一个新的选择，选择除最后一个孩子在其中的TDS，通过每个TD循环和提示.text()值。

JS Fiddle Example

Answer 2

我不知道为什么斯里达尔[R下来的一票！基地在他提供的代码我再拍简单的例子代码，使其清楚地看到：

<table id="filterTableMsg" border="1" class="TF"> 
    <tbody> 
     <tr> 
      <th>Message Title</th> 
      <th>Message</th> 
      <th>Schedule Date</th> 
      <th>share</th> 
     </tr> 
     <tr class="row_hover"> 
      <td>hello</td> 
      <td>hello message</td> 
      <td>2014-04-09 00:11:51</td> 
      <td> 
       <button class="FBshare">share it!</button> 
      </td> 
     </tr> 
     <tr class="row_hover"> 
      <td>hello again</td> 
      <td>hello new message</td> 
      <td>2014-04-08 10:15:21</td> 
      <td> 
       <button class="FBshare">share it!</button> 
      </td> 
     </tr> 
    </tbody> 
</table> 
<div class="output"> 
</div> 

注意改变类而不是ID的！

$(function() { 
    /*when i click on the FBshare button*/ 
    $(document).on('click', '.FBshare', function (e) { 
     e.preventDefault(); 
     var idex = $(this).closest('tr').index(); 
     var idex1 = $(this).closest('tr').find('td:eq(0)').text(); 
     var idex2 = $(this).closest('tr').find('td:eq(1)').text(); 
     var idex3 = $(this).closest('tr').find('td:eq(2)').text(); 

     $('.output').html('<p><b>index:</b>' + idex + ' ' + idex1 + ' ' + idex2 + ' ' + idex3 + '</p>'); 
    }); 
}); 

演示：http://jsfiddle.net/2czg5/6/