可点击 jQuery 表格排序器

Question

我在 JS 和 jQuery 方面很菜鸟，我的问题可能很愚蠢。我在我的项目中使用 jQuery tablesorter，我试图将 table 行设为 editable，这样当你点击一行时，能够获取选定的行 ID。比如我有这样的 table:

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。

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

HTML

将 class 分配给行，将 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, so even if you add or remove any table rows, it'll still work - 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 表格排序器

Clickable jQuery tablesorter

jquery

onclick

tablesorter