表格栏条件js格式

Question

I have an HTML table formatted with CSS.

I want the cells of the 4th column to have a red background if their value is smaller than -2 and green background if greater than +2.

Please advise.

Answer 1

This should get you started.. Change the value in the fourth row to change background colour.

  (function(){ var valueOfFourthRowValue = document.getElementById("value"); if (valueOfFourthRowValue.textContent > 2) { valueOfFourthRowValue.style.backgroundColor = "green" } else if (valueOfFourthRowValue.textContent < -2) { valueOfFourthRowValue.style.backgroundColor = "red" } })() 

 <table> <tr><td>One Row</td></tr> <tr><td>One Row</td></tr> <tr><td>One Row</td></tr> <tr><td id="value">3</td></tr> </table> 

if the table is dynamic and you want to grab the last element then use xpath.

var tableColumn = document.evaluate('//table//tr[last()]/td', document, null, XPathResult.ANY_TYPE, null).iterateNext();
tableColumn.setAttribute("id", "value");

Answer 2

The below script will work for your requirement, HERE is a working example for your reference. if you have multiple tables just give it a class and amend the script as required.

var trTags = document.getElementsByTagName("tr");
for (var i = 0; i < trTags.length; i++) {
  var tdFourthEl = trTags[i].children[3]; // starts with 0, so 3 is the 4th element
  if (tdFourthEl.innerText < -2) {
    tdFourthEl.style.backgroundColor = "red";
  } else if (tdFourthEl.innerText > 2) {
    tdFourthEl.style.backgroundColor = "green";
  }
}