In the interactive form below, users can dynamically add or remove rows. The calculation involves determining the difference between the cost price and the selling price of a product.
What I have been attempting to do (unsuccessfully for the past week) is to change the background color of the result cell to red if the value is negative and green if the value is positive. Despite finding several solutions on this site, I have been unable to successfully implement them.
<!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;
// Add logic here to change the background color based on result value
if(result1 < 0){
result.style.backgroundColor = "red";
} else {
result.style.backgroundColor = "green";
}
}
</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>