[英]How to change row background color on the basis of column value
I have a table with 3 columns named Name,Category,Subcategory and i want my tr background color according to the value of category column value.我有一个包含 3 列的表,名为 Name、Category、Subcategory,我希望根据类别列值的值来设置我的 tr 背景颜色。 Like喜欢
Name Category Subcategory
A Paid B
C Received D
So if Category value is paid then i want my tr background red and if it's received then i want green.因此,如果支付类别值,那么我想要我的 tr 背景红色,如果收到,那么我想要绿色。 I want this work through JS because i am getting my tables row using ajax like我希望通过 JS 完成这项工作,因为我正在使用 ajax 来获取我的表格行
var table = $('#data').DataTable( {
processing: true,
serverSide: true,
bFilter : false,
ajax: {
url : "{{ url('reports/gettransactions')}}",
data: function (d) {
d.type = '1';
d.category = $('select[name=category]').val();
d.names = $('input[name=name]').val();
//d.category = 'Salary';
d.subcategory = $('select[name=subcategory]').val();
d.fromdate = $('input[name=fromdate]').val();
d.todate = $('input[name=todate]').val();
},
},
"language": {
"decimal": "",
"emptyTable": "<?php echo trans('lang.demptyTable');?>",
"info": "<?php echo trans('lang.dshowing');?> _START_ <?php echo trans('lang.dto');?> _END_ <?php echo trans('lang.dof');?> _TOTAL_ <?php echo trans('lang.dentries');?>",
"infoEmpty": "<?php echo trans('lang.dinfoEmpty');?>",
"infoFiltered": "(<?php echo trans('lang.dfilter');?> _MAX_ <?php echo trans('lang.total');?> <?php echo trans('lang.dentries');?>)",
"infoPostFix": "",
"thousands": ",",
"lengthMenu": "<?php echo trans('lang.dshow');?> _MENU_ <?php echo trans('lang.dentries');?>",
"loadingRecords": "<?php echo trans('lang.dloadingRecords');?>",
"processing": "<?php echo trans('lang.dprocessing');?>",
"search": "<?php echo trans('lang.dsearch');?>",
"zeroRecords": "<?php echo trans('lang.dzeroRecords');?>",
"paginate": {
"first": "<?php echo trans('lang.dfirst');?>",
"last": "<?php echo trans('lang.dlast');?>",
"next": "<?php echo trans('lang.dnext');?>",
"previous": "<?php echo trans('lang.dprevious');?>"
}
},
columns: [
{ data: 'name', name:'name'},
{ data: 'category', name:'category'},
{ data: 'subcategory', name:'subcategory'},
{ data: 'account', name:'account'},
{ data: 'amount', name:'amount'},
{ data: 'transactiondate', name:'transactiondate'}
],
dom: 'Bfrtip',
buttons: [
{
extend: 'copy',
text: 'Copy <i class="fa fa-files-o"></i>',
title: '<?php echo trans('lang.income_reports');?>',
className: 'btn btn-sm btn-fill btn-info ',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5]
}
},
{
extend:'csv',
text: 'CSV <i class="fa fa-file-excel-o"></i>',
title: '<?php echo trans('lang.income_reports');?>',
className: 'btn btn-sm btn-fill btn-info ',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5 ]
}
},
{
extend:'pdf',
text: 'PDF <i class="fa fa-file-pdf-o"></i>',
title: '<?php echo trans('lang.income_reports');?>',
className: 'btn btn-sm btn-fill btn-info ',
orientation:'landscape',
exportOptions: {
columns: [0, 1, 2, 3, 4, 5]
},
customize : function(doc){
doc.styles.tableHeader.alignment = 'left';
doc.content[1].table.widths = Array(doc.content[1].table.body[0].length + 1).join('*').split('');
}
},
{
extend:'print',
title: '<?php echo trans('lang.income_reports');?>',
text: 'Print <i class="fa fa-print"></i>',
className: 'btn btn-sm btn-fill btn-info ',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5 ]
}
}
]
} );
Please refer the below code snippet with the description in the comment lines.请参考下面的代码片段以及注释行中的描述。
This is one way to achieve your solution.这是实现您的解决方案的一种方法。
var rows = document.getElementsByTagName("TR"); <;-- You are selecting the rows --> for(i = 1. i < rows;length. i++){ let cells = rows[i];getElementsByTagName("TD"). if (cells[1].innerText === 'Paid') { <.-- You are selecting the rows with column value "paid" --> rows[i];style.backgroundColor = "red"; <!-- You are making the row color as redfor indication --> } }
<table id="theTable"> <!-- lets assume this is ur table --> <tr> <th>Name</th> <th>Category</th> <th>Sub Category</th> </tr> <tr> <td>A</td> <td>Paid</td> <td>G</td> </tr> <tr> <td>B</td> <td>Received</td> <td>M</td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.