2013-07-01 90 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'); 
    });