jquery - 数据表 - 突出显示选定的行

Question

如何突出显示数据表中的选定行。我已经用 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]
    }]

});

在这里找到jsfiddle

Answer 1

在此处查看演示。

在表调用后添加：

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