Question

我正在尝试在我的jquery数据表中学习键焦点，但是它不起作用。这是我的简单代码。谁能帮我知道这是什么问题吗？这是我的HTML文件：

<!DOCTYPE html>
<html lang="en-US">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">   
</script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="tableScript.js"></script>
    <meta charset="UTF-8">
</head>

<body>
    <table id = "example" style="width:100%">
        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
</table>   

<div id="details"></div>
</body>
</html>

这是我的JS文件（tableScript.js）：

$(document).ready(function() {
    var table = $('#example').DataTable( {
    keys: true
} );

table
    .on( 'key-focus', function ( e, datatable, cell, originalEvent ) {
        var rowData = datatable.row( cell.index().row ).data();

        $('#details').html( 'Cell in '+rowData[0]+' focused' );
    } )
    .on( 'key-blur', function ( e, datatable, cell ) {
        $('#details').html( 'No cell selected' );
    } );
});

它在（#details）中未显示任何信息。知道这里有什么问题吗？

Answer 1

$(document).ready(function () {
  var table = $('#example').DataTable({
    keys: true
  });
  table
    .on('key-focus', function (e, datatable, cell, originalEvent) {
      var rowData = datatable.row(cell.index().row).data();

      $('#details').html('Cell in ' + rowData[0] + ' focused');
    })
    .on('key-blur', function (e, datatable, cell) {
      $('#details').html('No cell selected');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">   </script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src='https://cdn.datatables.net/keytable/2.2.0/js/dataTables.keyTable.min.js'></script>
<table id = "example" style="width:100%">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th align="right">Count</th>
      <th align="left"></th>
      <th align="left"></th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td contenteditable>4</td>
      <td contenteditable>5</td>
      <td contenteditable>6</td>
    </tr>
    <tr>
      <td contenteditable>7</td>
      <td contenteditable>8</td>
      <td contenteditable>9</td>
    </tr>
  </tbody>
</table>
<div id="details"></div>

注意：-您需要添加dataTables.keyTable来绑定按键事件

关键焦点在jQuery插件DataTables中不起作用

1 个答案: