Change numeric value in td with jquery

Question

How can I increase numeric values in a <td> element using jquery? I tried the following but no luck. I have a button with the id="#increaseNum", and am trying to change the td cell value with its click.

html:

<table>
<tr>
   <td id="num">1</td>
   <td id="num">5</td>
   <td id="num">10</td>
</tr>
</table>

js:

$(document).ready(function() {
    $("#increaseNum").click(function() {    
        $("#num").html(Number(("#num").innerText) + 1);
    });
});

This only makes the first <td> value disappear. Any suggestions?

Answer 1

Try this

<table class="numeric">
    <tr>
       <td id="num">1</td>
       <td id="num">5</td>
       <td id="num">10</td>
    </tr>
    </table>

js:

$(".numeric td").each(function () {
$(this).html(parseInt(("#num").text()) + 1);
});

Answer 2

Try substituting class=num for id=num to replace duplicate id 's with same className ; adding <tbody> element to parent <table> element

 $("#increaseNum").on("click", function() { $(".num").map(function(i, el) { el.innerHTML = 1 + Number(el.innerHTML); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <button id="increaseNum">click</button> <table> <tbody> <tr> <td class="num">1</td> <td class="num">5</td> <td class="num">10</td> </tr> </tbody> </table> 

Answer 3

Try this :Remove duplicate ids and use class instead. iterate each num to increment its value as shown below

HTML:

<table>
<tr>
   <td class="num">1</td>
   <td class="num">5</td>
   <td class="num">10</td>
</tr>
</table>

jQuery :

$(document).ready(function () {
    $("#increaseNum").click(function () {
        $(".num").each(function(){
           $(this).html(parseInt($(this).html())+1);
        });
    });
});

Answer 4

You can't have duplicate IDs so use class to select multiple elements

<table>
    <tr>
        <td class="num">1</td>
        <td class="num">5</td>
        <td class="num">10</td>
    </tr>
</table>

then

$(document).ready(function () {
    $("#increaseNum").click(function () {
        $(".num").html(function (i, html) {
            return +html + 1;
        });
    });
});

Demo: Fiddle

In your code there are multiple problems, ("#num") returns the string #num , you have missed $ . Again $("#num") will return a jQuery object so it doesn't have the innerText property, you can use $('#num').text()

Answer 5

First of all give unique id to td or change it to class. Then try something like below if you change it to class:

$('.num').click(function(){
     $(this).html(parseInt($(this).html()) + 1);
});

Above code will change only that td's value which has been clicked. If you want to change all td's then do each loop.

Answer 6

try to use class instead of id="num" if you really need to use the same id, try to select as following:

$(document).ready(function() {
    $("#increaseNum").click(function() {    
        $("td[id='num']").each(function(){
            $(this).html(parseInt($(this).text()) + 1);
        });
    });
});

because using $("#num") will always return you one element only

Demo for reference: http://jsfiddle.net/49k92b68/1/

Answer 7

If your goal is to increment each TD, then you want to use class assignment instead of ID which should be unique within your document.

This would look something like this..

HTML:

<table>
<tr>
   <td class="num">1</td>
   <td class="num">5</td>
   <td class="num">10</td>
</tr>
</table>

JavaScript:

$('.num').each(function(elem){
   var $elem = $(elem),
       nValue = +$elem.text();
   $elem.text(nValue++);
});

One thing to keep in mind that if content of your TD is not numeric, then increment will fail with NaN.