TheLion TheLion - 1 month ago 13
jQuery Question

Add css to specific cell in jquery datatables

I am using jquery and datatables in my project.

What I want now is to add CSS to cell on click of button i.e changing cell color.I only want to change single specific cell value not the entire row

I tried below method and it did not work

<table id="food">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Apple</td>
<td>Fruit</td>
</tr>
<tr>
<td>2</td>
<td>Mango</td>
<td>Fruit</td>
</tr>
<tr>
<td>3</td>
<td>Grape</td>
<td>Fruit</td>
</tr>
</tbody>
</table>

<button id='button1'>Click me</button>


Here is the jquery

$('#button1').click(function(){

//Here I want to change row 1,col 3 to red color

var cell = table.row(1).column(3).node();
$(cell).addClass('change-color');

});


Thanks

Answer

You can do something like this to get cell at column 3 and and row 2 (zero indexed)

var nodes = myTable.column(2).nodes();
$(nodes[1]).addClass('change-color);

Here is a demo http://jsfiddle.net/dhirajbodicherla/189Lp6u6/19/

Comments