[英]How to detect a change in any <td> of table, using javascript?
我有一個表格,其<td>
值根據形式輸入的不同而變化,我正在使用Tangle來創建反應式文檔。 是否可以檢測<td>
的值是否變為負數? 如果是這樣,則必須將其顏色更改為紅色!
Javascript或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";
};
也許這會有所幫助: 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";
};
}
假設我正確理解了您的問題,那么您不想檢查輸入的負值,而是想檢查纏結生成的文本值的負值。
該代碼應該更多地是您要查找的代碼,並且只要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>
考慮針對您的方案使用kickout.js,您可以使用它根據基礎數據輕松設置UI元素的格式。 看一下示例: http : //knockoutjs.com/examples/
為每個輸入框添加jquery更改事件。 下面是示例代碼
$("#NameInn1").change(function(){
var input = $("#NameInn1").val();
if(input<10){
$("#NameInn1").css("background-color","red");
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.