如何使用javascript检测任何<td>表的变化？答案

【问题标题】：How to detect a change in any <td> of table, using javascript?如何使用javascript检测任何<td>表的变化？
【发布时间】：2013-06-13 14:59:08
【问题描述】：

我有一个表，其 <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";
};

【问题讨论】：

1.获取文档中的所有 td 2. 遍历它们并获取 td 的文本 3. 检查是否在文本中找到“-” 4. 更改颜色 (.css)
把你的javascript也放在这里。尤其是update: function() {}
@niels123 这不会是动态的。我不知道 tangle 但您似乎希望它是动态的。

标签： javascript html html-table

【解决方案1】：

也许这会有所帮助：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";
    };
}

【讨论】：

-0 怎么样？（我知道，我知道）
如果我尝试检查单元格中每次更改的值怎么办？我正在从您的代码中尝试这样的事情：
呃，您忘记粘贴链接了吗？ :D
如果您提到您的问题更新：您正在尝试匹配 Int 上的“-”。您应该改为删除 parseInt 函数，并匹配字符串输入值的减号，如下所示：jsfiddle.net/WZ4sr
我现在已经试过了： var loss = document.getElementById("profitLossOut1").value; console.log（损失）； loss.onchange = function () { console.log("检查 IF 条件"); if (loss.match("-") == true) this.parentNode.style.background = "red"; };

【解决方案2】：

假设我正确理解您的问题，您不想检查输入的负值，而是要检查缠结生成的文本的负值> 价值观。

此代码应该是您正在寻找的更多内容，并且只要您的 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>

【讨论】：

【解决方案3】：

考虑在您的场景中使用 knockout.js，您可以使用它轻松地根据基础数据格式化您的 UI 元素。看看例子：http://knockoutjs.com/examples/

【讨论】：

【解决方案4】：

为每个输入框添加 jquery 更改事件。下面是示例代码

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

【讨论】：