Изменить числовое значение в td с помощью jquery

Question

Как увеличить числовые значения в элементе <td> с помощью jquery? Я попробовал следующее, но не повезло. У меня есть кнопка с id = "# увеличениеNum", и я пытаюсь изменить значение ячейки td с помощью щелчка.

HTML:

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

ЯШ:

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

Это только делает первый <td> значение исчезает. Какие-либо предложения?

Answer 1

Попробуйте это: Удалить дубликаты идентификаторов и использовать класс вместо этого. итерации каждый пит для увеличения его значения, как показано ниже

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 2

Попробуйте это

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

ЯШ:

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

Answer 3

Вы не можете иметь повторяющиеся идентификаторы так использовать класс для выбора нескольких элементов

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

затем

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

Demo: Fiddle

В коде есть несколько проблем, ("#num") возвращает строку #num, вы пропустили $. Опять $("#num") возвращает объект JQuery, так что не имеет innerText свойство, вы можете использовать $('#num').text()

Answer 4

Попробуйте заменить class=num для id=num заменить повторяющиеся id «S с таким же className; добавление <tbody> элемента к родителю <table> элемент

$("#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 5

В первую очередь дают уникальный идентификатор для TD или изменить его к классу. Тогда попробуйте что-то, как показано ниже, если вы измените его на класс:

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

Приведенный выше код будет изменить только значение этого TD, которая была нажата. Если вы хотите изменить все td, выполните каждый цикл.

Answer 6

пытаются использовать класс вместо ID = «номер» , если вам действительно нужно использовать тот же идентификатор, попробуйте выбрать следующие:

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

, потому что с помощью $ («# ЧИСЛО») будет всегда вернет вам только один элемент

Демо для справки: http://jsfiddle.net/49k92b68/1/

Answer 7

Если ваша цель состоит в том, чтобы увеличить каждый TD, то вы хотите использовать назначение класса вместо ID, который должен быть уникальным в пределах документа.

Это будет выглядеть примерно так ..

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

Одна вещь, чтобы иметь в виду, что если содержание вашего TD не является числовым значением, то приращение с ошибкой произойдет с NaN.