javascript - 如何使用 jquery 更改表格单元格颜色

Question

我有一个带有内联编辑功能的html表格，当用户编辑td时，如果用户输入的值小于零，则特定单元格的td颜色将改变，而无需刷新页面。

例如:如果 cell =< "-1", background-color=#FF0000

有什么方法可以实现这一点吗？

$("#table td").each( function() {
    var thisCell = $(this);
    var cellValue = parseInt(thisCell.text());        
    if (!isNaN(cellValue) && (cellValue >=0)) {
        thisCell.css("background-color","#FF0000");
    }
});

Answer 1

只需迭代每个单元格，解析其内容并设置背景颜色:

function updateColors () {
    $("td").css("background-color", "white");
    $("td").each (function () {
       var $cCell = $(this);
       if (Number ($cCell.text()) <= -1) {
          $cCell.css("background-color", "#FF0000");
       }
    });
}

updateColors();

// http://stackoverflow.com/a/7804973/1420197    
var allCells = document.querySelectorAll("td");
for (var i = 0; i < allCells.length; ++i) {
    allCells[i].addEventListener("DOMCharacterDataModified", function () {
        console.log(this.innerText);
        updateColors();
    });
}

演示

JSFIDDLE