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?

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?

• javascript
• jquery
• html
• html-table

• what is increaseNum? – Vikrant Commented Apr 23, 2015 at 4:38
• @Vikrant button with the id="#increaseNum" , sorry, ill edit and explain that. – jacksonSD Commented Apr 23, 2015 at 4:39
• 2 You cannot use same id for all td element, it must be unique. – Bhushan Kawadkar Commented Apr 23, 2015 at 4:40
• fyi, it is not a good idea to have multiple elements using the same id="num" – Katrin Commented Apr 23, 2015 at 4:40

7 Answers 7

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

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./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>

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

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()

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.

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/49k92b68/1/

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.