Question

我在一个包含2行的php文件中创建一个表，并在每个<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]的值。

我尝试使用此代码解决此问题，但它返回'undefined'：

$(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() );
    } );
} );

然后绑定到新类的click事件获取data-row属性的值，创建一个新的选择器以选择除最后一个子节点之外的TD，循环遍历每个TD并警告{{ 1}}值。

JS Fiddle Example

Answer 2

我不知道为什么Sridhar 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/

当我按下按钮时尝试获取td的值

2 个答案: