Question

如何使用jquery增加<td>元素中的数值？我试过以下但没有运气。我有一个id =“＃increaseNum”的按钮，我试图通过点击来改变td单元格值。

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

这只会使第一个<td>值消失。有什么建议吗？

Answer 1

试试这个

<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

尝试用class=num替换id=num替换重复id个className;将<tbody>元素添加到父<table>元素

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

试试这个：删除重复的ID并改用class。迭代每个数字以增加其值，如下所示

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

您不能拥有重复的ID，因此请使用class来选择多个元素

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

演示：Fiddle

在您的代码中存在多个问题，("#num")返回字符串#num，您错过了$。同样$("#num")将返回一个jQuery对象，因此它没有innerText属性，您可以使用$('#num').text()

Answer 5

首先为td提供唯一ID或将其更改为class。如果您将其更改为类，请尝试下面的内容：

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

以上代码只会更改已点击的td值。如果你想改变所有的td＆＃39;然后做每个循环。

Answer 6

尝试使用class而不是id =＆＃34; num＆＃34; 如果你真的需要使用相同的id，请尝试选择如下：

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

因为使用$（＆＃34; #num＆＃34;）将始终只返回一个元素

参考演示：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而失败。

使用jquery更改td中的数值

7 个答案: