Changing font color of cell

olva

there is a span in the cell. what is the best way to change its state (color) depending on the conditions

 "columns": [
                {"data": "prod_name", "width": "25%"},
                {"data": "prod_artikul", "width": "5%"},
                {"data": "prod_artikul_original"},
                {"data": "prod_barcode"},
                {"data": "prod_quantity"},
                {"data": "prod_unite"},
                {"data": "prod_price"},
                {"data": "id", "visible": false, "searchable": false},
                {"data": "updated_at", "visible": false, "searchable": false},
                {
                    "data": null,
                    "targets": -1,
                    "defaultContent": "<a href=\"#myModalBox\" data-toggle=\"modal\" role=\"button\" class=\" delete\" >" +
                        "<span style=\"font-size: 1em; color: Tomato;\" title=\"Удалить\"><i class=\"fas fa-trash-alt  fa-fm\"></i></span></a>&nbsp; &nbsp;<a href=\"#\"  role=\"button\" class=\" copy\" >" +
                        "<span style=\"font-size: 1em; color: #398e3c;\" title=\"Копировать\"><i class=\"fas fa-copy  fa-fm\"></i></span></a>&nbsp;&nbsp;<a href=\"#\" role=\"button\" class=\" edit\" >" +
                        "<span style=\"font-size: 1em; color: #0e148e;\" title=\"Редактировать\"><i class=\"fas fa-edit  fa-fm\"></i></span></a>&nbsp;&nbsp;<a href=\"#\" role=\"button\" class=\" show1\" >" +
                        "<span style=\"font-size: 1em; color: rgba(205,26,174,0.81);\" title=\"Просмотреть\"><i class=\"fas fa-eye  fa-fm\"></i></span></a>",
                },
                {
                    "data": null,
                    "targets": -1,
                    "defaultContent": " <span class=\"hover\" style='color: tomato;visibility: visible' ><i class=\"fas fa-exclamation-triangle \" ></i></span>"
                }
            ],

Variant no working

 rowCallback: function (row, data) {
                var today = new Date();//сегодня
                var updated = Date.parse(table.row(row).data().updated_at);               {{--}}дата обновления продукта{{--}}
                days = (today - updated) / (1000 * 60 * 60 * 24);
                if (data.prod_quantity <= 2 || days >=60) {
                    $(row).css({backgroundColor: "#F9DEE0"});
                    $('td', row).children().eq(10).css({color: "blue" });//I understand that the problem is here, but unfortunately I do not understand what the error is
                }
            }

I will be grateful for any help and idea!!!

kthorngren

Take a look at the examples in the rowCallback docs. They show how to access a particular cell in the row. This example may also help.

Kevin

olva

I do not quite clearly understand how to specify a child span for td.

kthorngren

specify a child span for td

I'm not sure what this means.

Please build a simple example of what you have and explain what you want to achieve. We can help through updating the example.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

olva

I need to change the color of the element <i> in the <span> in column 10 depending on the conditions

kthorngren

That is a vague description. In order to help you with a solution please provide a test case with an example of your data and provide details of the conditions. Otherwise you can use your choice of Javascript or jQuery tools to parse the row and update the class or css. I would look at using jQuery find() to find the i element to update it.

Kevin

olva

Thank you for your help! the problem was in hidden columns. I did not take into account these fields and the script, of course, tried to work several columns further.
Variant is work

 $('td:eq(8)', row).find("span").css({color: "blue" });

kthorngren

the problem was in hidden columns. I did not take into account these fields and the script,

Thats right, they aren't in the DOM. You might be able to use the column.index() API to get the DOM index of the column. This might make it more dynamic in case you choose to hide other columns. You can get a Datatable API instance with this.api() in rowCallback. Something like this might work:

var visIdx = this.api().column.index('toVisible', 10);
$('td:eq(' + visIdx + ')', row).find("span").css({color: "blue" });

Kevin