2013-07-01 119 views
2

如何突出顯示數據表中選定的行。我用jsfiddle中的jQuery代碼數據表更新了html。請幫我寫css來突出顯示不同顏色的選定行。數據表 - 突出顯示所選行

var oTable = $("#products1").dataTable({ 
     "aaData": newarray, 
     "bProcessing": true, 
     "bDeferRender": true, 
     "bFilter": false, 
     "bJQueryUI": true, 
     "bRetrieve": true, 
     "bPaginate": false, 
     "bSort": true, 
     "aaSorting": [[4, "desc"]], 
     "iDisplayLength": 25, 
     "aoColumns": [{"sWidth": "100%","sClass": "center","bSortable": false}, 
      { 
      "sWidth": "150%","sClass": "center","bSortable": false}, 
      { 
      "sWidth": "150%","sClass": "center","bSortable": false}, 
      { 
      "sWidth": "150%","sClass": "center","bSortable": false} 


      ], 
     "aoColumnDefs": [{ "fnRender": function (o, val) { 
      return o.aData[0]; 
     }, 
      "sClass": "col1","aTargets": [0] 
    }, { 
     "fnRender": function (o, val) { 

      return o.aData[1]; 
     }, 
      "sClass": "col2","aTargets": [1] 
    }, { 
    "fnRender": function (o, val) { 

      return o.aData[2]; 
     }, 
      "sClass": "Number","aTargets": [2] 
    },{ 
    "fnRender": function (o, val) { 

      return o.aData[3]; 
     }, 
      "sClass": "Name","aTargets": [3] 
    }] 

}); 

here find jsfiddle

+0

該表爲空,我們如何選擇行? – Cherniv

+0

@cherniv,你去http://jsfiddle.net/rwPFx/5/ – user2444474

+1

這個問題如何被標記爲脫離主題?問題很明顯。 –

回答

4

檢查演示here

表調用後添加此。

$("#products tbody tr").on('click',function(event) { 
     $("#products tbody tr").removeClass('row_selected');   
     $(this).addClass('row_selected'); 
    });