Question

我在JS和jQuery中很高兴，我的问题可能很愚蠢。我在我的项目中使用jQuery tablesorter，我试图使表行可编辑，这样当你点击一行时，能够获得所选的行id。例如，我有这样的表：

No | Name | Address
1  | Jon  | USA 
2  | Michael  | USA

所以当我点击第二行时，我想得到No值。 jQuery tablesorter的任何信息源都是有用的。

Answer 1

取决于您的HTML，但假设您有类似的内容：

<table id="mytable">
<tr>
    <th>
        No
    </th>
     <th>
        Name
    </th> 
      <th>
        Address
    </th>
</tr>
<tr data-id="1">
    <td>
       1
    </td>
    <td>
        Jon
    </td>
    <td>
        USA
    </td>
</tr>
</table>

您可以使用：

$("#mytable tr")
    .on( "click", function(){
         var myId = $( this ).attr( "data-id" );
         // do something
     });

Answer 2

您可以使用在普通DOM中使用的所有内容。

我在这里创建了一个测试小提琴 - http://jsfiddle.net/picklespy/oz31pj0n/

<强> HTML

为行分配class，为No列分配一个类。当有人点击该行时，此示例将提醒No列中的值。

<table cellspacing="1" cellpadding="0" border="0" class="tablesorter">
        <thead>
            <tr>
                <th>No</th>
                <th class="header headerSortDown">Name</th>
                <th class="header">Address</th>
            </tr>
        </thead>
        <tbody>
            <tr class="row">
                <td class="id">1</td>
                <td>Jon</td>
                <td>USA</td>
            </tr>
            <tr class="row">
                <td class="id">2</td>
                <td>Michael</td>
                <td>USA</td>
            </tr>
    </tbody>
</table>

<强> JS

$(document).ready(function() {
    $('tr.row').click(function() {
        alert($(this).find('td.id').text())
    });
});

Answer 3

您无需对HTML进行任何更改。

此方法使用delegated event binding，因此即使您添加或删除任何表格行，它仍然有用 - demo

$(function () {

    $('table')
        .on('click', 'tbody tr', function(){
            // closest finds the row, .eq(0) finds the first cell
            var id = $(this).closest('tr').children().eq(0).text();
            alert( id );
        })
        .tablesorter({
            theme: 'blue'
        });

});

可点击的jQuery tablesorter

3 个答案: