如何根据列值更改行背景颜色

Question

我有一个包含 3 列的表，名为 Name、Category、Subcategory，我希望根据类别列值的值来设置我的 tr 背景颜色。喜欢

Name     Category     Subcategory
A        Paid         B 
C        Received     D

因此，如果支付类别值，那么我想要我的 tr 背景红色，如果收到，我想要绿色。我希望通过 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 ]
                }
            }
        ]
} );

Answer 1

请参考下面的代码 sn-p 以及注释行中的描述。

这是实现您的解决方案的一种方法。

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>