Question

这是我的HTML标记：

<article class="container content col-xs-12 col-sm-9 col-md-10 col-lg-10">
      <div class="x_panel well">
        <div class="x_content">
          <table id="datatable-buttons" class="table table-striped table-bordered">
              <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
              </thead>
              <tbody></tbody>
              <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
              </tfoot>
          </table>
        </div>
      </div>
  </article>

我使用下面的JSON数据填充了这个表是代码：

$(document).ready(function()
{
  function init_DataTables()
    {
      console.log('run_datatables');

      if( typeof ($.fn.DataTable) === 'undefined'){ return; }
      console.log('init_DataTables');

      var handleDataTableButtons = function() {
        if ($("#datatable-buttons").length){
          $("#datatable-buttons").DataTable({
                                              dom: "Bfrtip",
                                              buttons: [
                                                  {
                                                      extend: "copy",
                                                      className: "btn-sm"
                                                  },
                                                  {
                                                      extend: "csv",
                                                      className: "btn-sm"
                                                  },
                                                  {
                                                      extend: "excel",
                                                      className: "btn-sm"
                                                  },
                                                  {
                                                      extend: "pdfHtml5",
                                                      className: "btn-sm"
                                                  },
                                                  {
                                                      extend: "print",
                                                      className: "btn-sm"
                                                  },
                                              ],
                                              "aaData": [
                                                  {
                                                      "Name": "Tiger Nixon",
                                                      "Position": "System Architect",
                                                      "Office": "$320,800",
                                                      "Age": "2011/04/25",
                                                      "Start date": "Edinburgh",
                                                      "Salary": "5421"
                                                  },
                                                  {
                                                      "Name": "Garrett Winters",
                                                      "Position": "Accountant",
                                                      "Office": "$170,750",
                                                      "Age": "2011/07/25",
                                                      "Start date": "Tokyo",
                                                      "Salary": "8422"
                                                  },
                                                  {
                                                      "Name": "Ashton Cox",
                                                      "Position": "Junior Technical Author",
                                                      "Office": "$86,000",
                                                      "Age": "2009/01/12",
                                                      "Start date": "San Francisco",
                                                      "Salary": "1562"
                                                  },
                                                  {
                                                      "Name": "Cedric Kelly",
                                                      "Position": "Senior Javascript Developer",
                                                      "Office": "$433,060",
                                                      "Age": "2012/03/29",
                                                      "Start date": "Edinburgh",
                                                      "Salary": "6224"
                                                  }
                                              ],
                                              "aoColumns": [
                                                  { "mData": "Name" },
                                                  { "mData": "Position" },
                                                  { "mData": "Office" },
                                                  { "mData": "Age" },
                                                  { "mData": "Start date" },
                                                  { "mData": "Salary" }
                                              ],
                                              responsive: true
                                            });
        }
      };

      TableManageButtons = function()
        {
          "use strict";
          return {
          init: function() {
            handleDataTableButtons();
          }
          };
        }();

      $('#datatable-scroller').DataTable({
        ajax: "js/datatables/json/scroller-demo.json",
        deferRender: true,
        scrollY: 380,
        scrollCollapse: true,
        scroller: true
      });

      var $datatable = $('#datatable-checkbox');

      $datatable.dataTable({
        'order': [[ 1, 'asc' ]],
        'columnDefs': [
        { orderable: false, targets: [0] }
        ]
      });

      $datatable.on('draw.dt', function()
        {
          $('checkbox input').iCheck({
          checkboxClass: 'icheckbox_flat-green'
          });
        });
      TableManageButtons.init();
    };

  init_DataTables();
});

我想要做的是我想获取该特定行的名称字段中存在的值并对该行执行操作。我正在使用下面的jQuery代码，但它显示未定义。

这是我的jQuery代码：

$(document).on('mouseover', '#datatable-buttons tbody tr', function()
        {
            alert($(this).data('Name'));
        });

当鼠标位于tr字段上时，如何获取每个字段的特定字段的值

Answer 1

如果您的代码有效，那就没关系。但是，对于未来的读者，我想建议一些更正。

过度烹饪选择器
$(document).on('mouseover', '#datatable-buttons tbody tr',中的选择器过度烹饪。它成为整体document的委托事件，您需要的只是

$('#datatable-buttons').on('mouseover', 'tbody tr',

将事件委派给document意味着解析器需要经历更多元素==执行速度较慢。当声明处理程序时，如果您不确定父元素是否真的存在，那么document只能用作替代。

膨胀数据检索
$(this).children(":first").text()也有点过头了。您将tr转换为jQuery实例，然后枚举所有其子项，然后使用:first仅获取一列的提取的文本内容

您手上有一个巨大的优化dataTables API。如果您没有按table = $("#datatable-buttons").DataTable({..})存储dataTable实例，那么您始终可以使用var table = $("#datatable-buttons").DataTable();

访问实例化的dataTable上的API

dataTable tr总是有一个名为_DT_RowIndex的属性，它是行唯一索引。 API有许多cell方法来访问或操作单个单元格。

所以这就是我的建议：

$('#datatable-buttons').on('mouseover', 'tbody tr', function() {
  var row = this._DT_RowIndex;
  var table = $('#datatable-buttons').DataTable();
  console.log ('col #1 ', table.cell( row, 0 ).data() );
  console.log ('col #2 ', table.cell( row, 1 ).data() );  
  console.log ('col #3 ', table.cell( row, 2 ).data() );
  console.log ('col #4 ', table.cell( row, 3 ).data() );
  console.log ('col #5 ', table.cell( row, 4 ).data() );
  console.log ('col #6 ', table.cell( row, 5 ).data() );
})

更快的事件处理，更快的数据检索以及更易读和更友好的代码。

演示 - ＆gt;的 http://jsfiddle.net/kx6grj2q/

Answer 2

我找到了答案，这是代码：

alert($(this).children(":first").text());

所以我的全部新代码就像

$(document).on('mouseover', '#datatable-buttons tbody tr', function()
    {
        alert($(this).children(":first").text());
    });

参考：https://datatables.net/forums/discussion/28573/how-can-i-get-a-cell-value-when-i-select-a-table-row

如何通过JQuery

2 个答案: