html - How to detect a change in any <td> of table, using javascript? - Stack Overflow

admin管理员组

文章数量:1389762

I have a Table whose <td> values varies depending upon the inputs given in form, I am using Tangle to make a reactive document. Is it posible to detect if the value of <td>changes to any negative number? If so, then it must change its color to red!
Can Javascripting or html tags itself solve this problem?
Please help!
My change will be on profitLossIn1,profitLossIn2,profitLossIn3.
Here is my 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>

I am trying this:

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";
};

I have a Table whose <td> values varies depending upon the inputs given in form, I am using Tangle to make a reactive document. Is it posible to detect if the value of <td>changes to any negative number? If so, then it must change its color to red!
Can Javascripting or html tags itself solve this problem?
Please help!
My change will be on profitLossIn1,profitLossIn2,profitLossIn3.
Here is my 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>

I am trying this:

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";
};

• javascript
• html
• html-table

Share Improve this question Follow edited Jun 13, 2013 at 6:59 MHS asked Jun 12, 2013 at 11:34 MHSMHS 2,3801212 gold badges3434 silver badges4646 bronze badges 3

• 1. Get all the td's in your document 2. Loop through them and get text of td 3. Check if "-" is found in text 4. Change color (.css) – nielsv Commented Jun 12, 2013 at 11:45
• 1 put your javascript here too. especially the update: function() {} – yardarrat Commented Jun 12, 2013 at 11:46
• @niels123 that's not going to be dynamic though. I don't know tangle but it seems like you would want it dynamic. – yardarrat Commented Jun 12, 2013 at 11:48

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

maybe this can be helpful: http://jsfiddle/tz7WB/

JQUERY CODE

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

try to type any negative number in the inputs

---

with pure js: http://jsfiddle/tz7WB/1/

JS CODE

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";
    };
}

Assuming I understand your question correctly, you don't want to check for negative values of the inputs, you want to check for negative values of the tangle-generated text values.

This code should be more of what you're looking for, and it works as long as the text content of your data-var elements starts with the number. If not, the number parsing logic will need to be improved:

<script src="http://code.jquery./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>

Consider using knockout.js for your scenario, you can use it to easily format your UI elements according to the underlying data. Take a look at the examples: http://knockoutjs./examples/

Add jquery change events for each of input boxes . Below is sample code

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

本文标签： htmlHow to detect a change in any lttdgt of tableusing JavaScriptStack Overflow