如何檢測表中任何​​的變化，使用javascript？

Question

我有一個表格，其<td>值根據表單中給出的輸入而變化，我使用Tangle來創建被動文檔。檢測<td>的值是否更改爲任何負數可以檢測嗎？如果是這樣，那麼它必須改變它的顏色爲紅色！
可以通過Javascripting或html標籤來解決這個問題嗎？
請幫忙！
我的更改將在profitLossIn1，profitLossIn2，profitLossIn3。
這裏是我的html：

<table> 
    <tr> 
     <th>Name</th> 
     <th>Cost</th> 
     <th>Revenue</th> 
     <th>Result Profit/Loss</th> 
    </tr> 
    <tr> 
     <td><input id='NameInn1' type='text' NAME="NameInn1"></td> 
     <td><span class="TKNumberField" data-var="CostIn1"></span></td> 
     <td><b data-var="revenueIn1"> Cost</b></td> 
     <td><b data-var="profitLossIn1"> dollars</b></td> 
    </tr> 
    <tr> 
     <td><input id='NameInn2' type='text' NAME="NameInn2"></td> 
     <td><span class="TKNumberField" data-var="CostIn2"></span></td> 
     <td><b data-var="revenueIn2"> Cost</b></td> 
     <td><b data-var="profitLossIn2"> dollars</b></td> 
    </tr> 
    <tr> 
     <td><input id='NameInn3' type='text' NAME="NameInn3"></td> 
     <td><span class="TKNumberField" data-var="CostIn3"></span></td> 
     <td><b data-var="revenueIn3"> Cost</b></td> 
     <td><b data-var="profitLossIn3"> dollars</b></td> 
    </tr> 

    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td><b data-var="totalRevenueIn"> dollars</b></td> 
    </tr> 
</table> 

我想這一點：

var inputs = document.getElementById("profitLossOut1"); 
console.log(inputs.value); 
inputs.onchange = function() { 
    console.log("Checking IF condition"); 
    if ((parseInt(this.value)).match("-") == true) this.parentNode.style.background = "red"; 
}; 

Answer 1

假設我正確地理解你的問題，你不希望檢查的輸入負值，要檢查是否有糾結產生文本值的負值。

此代碼應該更符合您的要求，只要您的data-var元素的文本內容以數字開頭，它就會有效。如果不是，解析邏輯數量將需要改進：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("input").change(function(e) { 
     var $target = $(e.target); 
     var checkNeg = function(c) { 
      for(var i=0,$ci; i<c.length; i++) { 
       $ci = $(c[i]); 
       if(parseInt($ci.text()) < 0) $ci.css("color", "red"); 
       else $ci.css("color", "black"); 
      } 
     }; 
     checkNeg($target.parents("table").find("[data-var]")); 
    }); 
}); 
</script> 

Answer 2

也許這會有所幫助：http://jsfiddle.net/tz7WB/

jQuery代碼

$(":input").on("change", function() { 
    if (parseInt($(this).val()) < 0) $(this).closest("td").css("background", "red"); 
}) 

嘗試類型在輸入

---

純JS任何負數：http://jsfiddle.net/tz7WB/1/

JS代碼

var inputs = document.getElementsByTagName("input"); 
for (var x = 0; x < inputs.length; x++) { 
    inputs[x].onchange = function() { 
     if (parseInt(this.value) < 0) this.parentNode.style.background = "red"; 
    }; 
} 

Answer 3

考慮使用knockout.js您的方案，你可以用它來輕鬆地格式化根據底層數據的UI元素。看看例子：http://knockoutjs.com/examples/

Answer 4

爲每個輸入框添加jQuery變化事件。下面的示例代碼

$("#NameInn1").change(function(){ 
    var input = $("#NameInn1").val(); 
    if(input<10){ 
    $("#NameInn1").css("background-color","red"); 
    } 
});