嘗試當我按下一個按鈕

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/