CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
jacksonSD
jacksonSD

Reputation: 677

Change numeric value in td with jquery

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?

Upvotes: 2

Views: 3243

Answers (7)

Simon
Simon

Reputation: 86

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.

Upvotes: 1

Katrin
Katrin

Reputation: 891

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/

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

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

Upvotes: 2

Priyank Sheth
Priyank Sheth

Reputation: 2362

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.

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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

Upvotes: 2

guest271314
guest271314

Reputation: 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.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>

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 1

Related Questions