可点击 jQuery 表格排序器
Clickable jQuery tablesorter
我在 JS 和 jQuery 方面很菜鸟,我的问题可能很愚蠢。我在我的项目中使用 jQuery tablesorter,我试图将 table 行设为 editable,这样当你点击一行时,能够获取选定的行 ID。比如我有这样的 table:
No | Name | Address
1 | Jon | USA
2 | Michael | USA
所以当我点击第二行时,我想得到No值。关于 jQuery tablesorter 的此类实施的任何信息来源都将很有用。
取决于您的 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
});
您可以使用正常使用的所有东西 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())
});
});
您无需对 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'
});
});
我在 JS 和 jQuery 方面很菜鸟,我的问题可能很愚蠢。我在我的项目中使用 jQuery tablesorter,我试图将 table 行设为 editable,这样当你点击一行时,能够获取选定的行 ID。比如我有这样的 table:
No | Name | Address
1 | Jon | USA
2 | Michael | USA
所以当我点击第二行时,我想得到No值。关于 jQuery tablesorter 的此类实施的任何信息来源都将很有用。
取决于您的 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
});
您可以使用正常使用的所有东西 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())
});
});
您无需对 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'
});
});