我试图在第一次加载数据时自动选择表格的第一行，但没有成功。
如何在第一次加载表格时自动选择表格的第一行？ 此 html 无效:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css" title="currentStyle">
@import "DataTables/css/demo_page.css";
@import "DataTables/css/demo_table.css";
</style>
<script type="text/javascript" src="Datatables/js/jquery.js"></script>
<script type="text/javascript" src="Datatables/js/jquery.dataTables.js"></script>
<script>
var oTable;
var firstTime = true;
$(document).ready(function () {
$("#example tbody").click(function (event) {
$(oTable.fnSettings().aoData).each(function () {
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
oTable = $('#example').dataTable({
"sScrollX": "500px",
"sPaginationType": "full_numbers",
"bServerSide": true,
"sAjaxSource": "services/data3.ashx",
"sServerMethod": "POST",
"fnDrawCallback": function (oSettings) {
if (firstTime) {
alert('DataTables has redrawn the table');
oTable.$('tr:first').click();
firstTime = false;
}
}
});
});
</script>
</head>
<body>
<table border="1" >
<tr><td>id</td><td><input type="text" /></td></tr>
<tr><td>name</td><td><input type="text" /></td></tr>
<tr><td>surname</td><td><input type="text" /></td></tr>
</table><br />
<table id="example" border="1" class="display">
<thead>
<tr>
<td>name</td>
<td>surname</td>
<td>id</td>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
最佳答案
oTable.$('tr:first')将引发错误 - $不是 oTable 的函数或属性。
你必须使用
oTable.find('tbody tr:first').focus()
因为tr:first将返回 <thead> <tr> , 而不是 <tbody> <tr> !
我不认为默认情况下你可以关注整个 <tr>在 HTML 中，因此您必须向 <tr> 添加一些 CSS使焦点可见。像这样
tr {
border:1px inset white;
}
tr.focused {
border:1px solid red;
}
oTable.find('tbody tr:first').addClass('focused');
单击时聚焦行的示例:
oTable.find('tbody tr').click(function() {
oTable.find('tbody tr').removeClass('focused');
$(this).addClass('focused');
});
这个 fiddle 中的所有上述内容 -> http://jsfiddle.net/vv7Sa/
关于javascript - 数据表选择第一行onload，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19998225/