如何通過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(); 
}); 

什麼我試圖做的是我想要獲取該特定行的名稱字段中存在的值，並在該行上執行操作。我正在使用下面的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有許多方法來訪問或操縱單個單元格。

所以這是我會建議：

$('#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