jQuery DataTables单元样式

Question

I'm using jQuery DataTables, and I am able to look at the row data and colorize the row.

Here is the code that creates the datatable:

 var $dataTable = $('#example1').DataTable({
   "data": data,
   "dataType": "json",
   "iDisplayLength": 25,
   "order": [[6, "desc"]],
   "scrollY": 550,
   "scrollX": true,
   "bDestroy": true,
   "stateSave": true,
   // here is the part that styles the row
   "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull)
   {
     if (aData[12] == "Y"){$('td', nRow).css('background-color', '#EE6363');}
     if (aData[9] == "Y"){$('td', nRow).css('font-weight', 'bold');}
   }
 });

So if you'll notice in the code above, the 1st if statement checks if the row data of the 12th column, which is called REJECTED, is "Y". If so, make the entire row red.

The 2nd if statement checks if the row data of the 9th column, which is called URGENT, is "Y". If so, make the text for that entire row bold.

What I would like to do is make the cell for that column red instead of the whole row, primarily for the 1st row.

How can I alter my code above to achieve this?

Answer 1

I can't test it....

But I would try something like this :

if (aData[12] == "Y"){$('td', nRow)[12].css('background-color', '#EE6363');}

Or this tricky thing:

if (aData[12] == "Y"){$('td', nRow).parent().children()[12].css('background-color', '#EE6363');}

If zero-based:

if (aData[12] == "Y"){$('td', nRow)[11].css('background-color', '#EE6363');}

Or:

if (aData[12] == "Y"){$('td', nRow).parent().children()[11].css('background-color', '#EE6363');}

Answer 2

Here is the code that will color the target cell:

 if (aData[12] == "Y"){$('td', nRow).eq(1).css('background-color', '#BF5FFF');}

By adding eq(1), I can target and color the 2nd cell in the datatable. This is how I got it to work.