数据表 - 突出显示所选行

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]
    }]

});

here find jsfiddle

Answer 1

查看演示here

在表格调用后添加此内容。

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