如何通过JQuery获取鼠标覆盖上每一行的值

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();
});

我要做的是获取该特定行的name字段中存在的值，并对该行执行一个操作。我正在使用下面的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。如果不是通过dataTable存储table = $("#datatable-buttons").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() );
})

更快的event.handling，更快的数据检索和更多的可读性和维护友好的代码。

演示-> 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