How to add the background-color and how to highlight the border of I am using datatables 1.9.4 version

Question

Is it possible to highlight border of <tr> and can we append background-color to same <tr> inside the table?

Answer 1

According to this answer, you can style tr borders if border-collapse is set on the table.

CSS :

table {border-collapse:collapse;}
tr {border:2px solid black;}

HTML :

<table>
  <tr>
    <td>cell</td><td>cell</td><td>cell</td>
  </tr>
</table>

You can see the result in this fiddle.

I don't understand your question about tr bgcolors but maybe the fiddle above will give you the answer.

Answer 2

Here is a "select" feature that highlights the entire row with a border - .odd / .even classes preserved :

table.dataTable tbody tr.selected td:first-child {
   border-left: 1px solid lime;
}
table.dataTable tr.selected td:last-child {
   border-right: 1px solid lime;
}
table.dataTable tbody tr.selected td {
   border-top: 1px solid lime;
   border-bottom: 1px solid lime; 
   background-color: yellow !important;
}
table.dataTable tbody tr.selected td:not(:first-child):not(:last-child) {
   border-left: 0px;
   border-right: 0px;  
}

$("#example").on('click', 'tbody td', function() {
    $(this).parent().toggleClass('selected');
});    

demo -> http://jsfiddle.net/z8bn8rj1/

---

Original answer. This is a little bit tricky since border-color not is supported by / valid for <tr>'s in CSS.

First remove the .odd / .even classes dataTables by default are adding to table rows, simply by giving asStripeClasses an empty array :

var table = $('#example').dataTable({
   asStripeClasses : []
});

Then, here an example of setting the border of <tr>'s lime, and the background-color yellow :

/* border-bottom of the headers, they appear as first row border-top */
table.dataTable thead th {
    border-bottom: 1px solid lime;
}    
/* set first column left border */
table.dataTable tbody td:first-child {
   border-left: 1px solid lime;
   border-top: 1px solid lime;
}
/* set last column right border */
table.dataTable td:last-child {
   border-right: 1px solid lime;
   border-top: 1px solid lime;
}
/* remove border between columns, alternatively set border as background-color */
table.dataTable tbody td:not(:first-child):not(:last-child) {
   border-top: 1px solid lime;
   border-left: 0x;
   border-right: 0px;  
}
/* set last row columns border-bottom */
table.dataTable tbody tr:last-child td {
    border-bottom: 1px solid lime;
}    
/* set all columns background-color */
table.dataTable tbody td {
    background-color: yellow;
} 

demo -> http://jsfiddle.net/jasjek8o/