Highlighte table cells

Question

When the 'add line' button is clicked, I want to check the values of each cell in all rows in my table and if the value is 0 or empty, i want to highlight those cells.

I tried something like this, but it doesn't work:

var $row = jQuery('#tblOrderLines').closest('tr');
        var $columns = $row.find('td');

        $columns.addClass('row-highlight');
        var values = "";

        jQuery.each($columns, function (i, item) {
            values = values + 'td' + (i + 1) + ':' + item.innerHTML + '<br/>';
            alert(values);
        });

Answer 1

Hi @Kabdar ,

You can try to use the following code:

function addOrderLine() {
        var table = document.getElementById('tblOrderLines');
        for (var r = 1, n = table.rows.length; r < n; r++) {
            for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
                var x = table.rows[r].cells[c].getElementsByTagName('input')[0].value;
           
                if (x == "" || x == 0) {
                    table.rows[r].cells[c].getElementsByTagName('input')[0].style.background = 'green'
                }
               
            }
           
        }
       
    }

Test output:

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.