CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user5201588
user5201588

Reputation: 5

jQuery change cell background to red on negative value

In the below dynamic form rows can be added or removed dynamically. Calculation involves finding the difference between cost price and the selling price of a product.

What I like to implement (and trying in vain for the last one week or so) is to set the background color of the result cell to red if the value is negative and to green if the value is positive. Though I came across several solutions on this site unfortunately I was unable to implement them to solve this.

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS</title>
    </head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if (rowCount < 5) { // limit the user from creating fields more than your limits
        var row = table.insertRow(rowCount);
        //var row = table.insertRow(rowCount-1);
        var colCount = table.rows[0].cells.length;
        row.id = 'row_'+rowCount;
        for (var i = 0; i < colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.outerHTML = table.rows[0].cells[i].outerHTML;            
        }
       var listitems= row.getElementsByTagName("input")
            for (i=0; i<listitems.length; i++) {
              listitems[i].setAttribute("oninput", "calculate('"+row.id+"')");
            }
    } else {
        alert("Maximum 5 Rows Only.");

    }
}

function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for (var i = 0; i < rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if (null !== chkbox && true === chkbox.checked) {
            if (rowCount <= 1) { // limit the user from removing all the fields
                alert("Cannot Remove all the Records.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

    </script>
    <script>
    function calculate(elementID) {
        var mainRow = document.getElementById(elementID);
        var num1 = mainRow.querySelectorAll('[name=num1]')[0].value;
        var num2 = mainRow.querySelectorAll('[name=num2]')[0].value;
        var result = mainRow.querySelectorAll('[name=result]')[0];
        var result1 = num2 - num1;
        result.value = result1;
    }
    </script>
    <body>
    <input type="button" value="Add" onClick="addRow('dataTable')" />
    <input type="button" value="Remove" onClick="deleteRow('dataTable')" />
    <table id="dataTable" class="form" border="1">
        <tbody>
            <tr id='row_0'>

                    <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>

                    <td>
                        <label>Cost Price</label>
                        <input type="text" size="1" required="required" name="num1" class="num1" id="num1" oninput="calculate('row_0')"/>
                    </td>
                    <td>
                        <label>Selling Price</label>
                        <input type="text" size="1" required="required" name="num2" class="num2" id="num2" oninput="calculate('row_0')"/>
                    </td>
                    <td>
                        <label>Difference</label>
                        <input type="text" size="1" required="required" name="result" class="result" id="result" />
                    </td>

            </tr>
            </tbody>
            </table>
    </body>
    </html>

Upvotes: 0

Views: 1108

Answers (2)

Harshit Gupta
Harshit Gupta

Reputation: 739

function calculate(elementID) {
    var mainRow = document.getElementById(elementID);
    var num1 = mainRow.querySelectorAll('[name=num1]')[0].value;
    var num2 = mainRow.querySelectorAll('[name=num2]')[0].value;
    var result = mainRow.querySelectorAll('[name=result]')[0];
    var result1 = num2 - num1;
    result.value = result1;
    if(result1 < 0){
        $(result).parent().css("background", "red");
    }else{
        $(result).parent().css("background", "");
    }
}

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Aside from the HTML issues (as noted in the comments on your question) you can achieve your goal by checking the result1 variable is greater than zero, and applying the relevant style to the parent td of the input. Try this:

function calculate(elementID) {
    var mainRow = document.getElementById(elementID);
    var num1 = mainRow.querySelectorAll('[name=num1]')[0].value;
    var num2 = mainRow.querySelectorAll('[name=num2]')[0].value;
    var result = mainRow.querySelectorAll('[name=result]')[0];
    var cell = result.parentElement;
    var result1 = num2 - num1;
    result.value = result1;

    var cellBackground = result1 < 0 ? 'red' : 'transparent';
    cell.style.backgroundColor = cellBackground;
}

Example fiddle

Upvotes: 1

Related Questions