Add css to specific cell in jquery datatables

Question

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

do you want to change the css for the entire row ? And where is this checkbox ? first column of each row ? Please be describe your situation more in the question — Dhiraj
– Dhiraj, Commented Jun 30, 2015 at 19:53
Hi dhiraj, Removed all un necessary things..now question looks simple and clear.. — TestingInProd
– TestingInProd, Commented Jun 30, 2015 at 20:39

Dhiraj · Accepted Answer · 2015-06-30 21:03:06Z

3

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/

edited Jun 30, 2015 at 21:03

answered Jun 30, 2015 at 20:52

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

demo · Accepted Answer · 2016-11-04 02:31:55Z

1

You can also change all Values defining a columns with an increment i+num

this work with jquery datatables

var myTable = $('#example2').DataTable(); 
var columnas = new Array();
    columnas[4] = 4;  
$.each(columnas, function(i, v) {  
   var x = i+3;  
   var nodes = myTable.column([x]).nodes();   
   var y = i+3;   
   $.each(nodes, function(y, v) {  
       $(nodes[y]).addClass('change-color');              
   });
});

edited Nov 4, 2016 at 2:31

demo

6,29519 gold badges84 silver badges162 bronze badges

answered Nov 3, 2016 at 21:39

Ignacio Olivieri

135 bronze badges

Collectives™ on Stack Overflow

Add css to specific cell in jquery datatables

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related