jQuery在负值上将单元格背景更改为红色

Question

在下面的动态表单中，可以动态添加或删除行。 计算涉及找到成本价格与产品售价之间的差异。

我想要实现的方法（并且过去一星期左右都徒劳尝试）是将结果单元格的背景色设置为红色（如果该值为负），而设置为绿色（如果该值为正）。 尽管很遗憾，我在此站点上遇到了几种解决方案，但我无法实施它们来解决此问题。

    <!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>

Answer 1

除了HTML问题（如问题评论中所述）外，您还可以通过检查result1变量是否大于零，并将相关样式应用于input的父td来实现目标。 尝试这个：

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;
}

小提琴的例子

Answer 2

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", "");
    }
}