使用 jquery 更改 td 中的数值

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

你不能有重复的 ID 所以使用 class 到 select 多个元素

<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") return 字符串 #num，您遗漏了 $。同样，$("#num") 将 return 一个 jQuery 对象，因此它没有 innerText 属性，您可以使用 $('#num').text()

Answer 3

尝试用 class=num 替换 id=num 以将重复的 id 替换为相同的 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 4

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

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 5

首先给td一个唯一id或者改成class。如果将其更改为 class:

，请尝试如下所示

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

以上代码只会改变被点击的td的值。如果你想改变所有的 td 然后做每个循环。

Answer 6

尝试使用 class 而不是 id="num" 如果您确实需要使用相同的 id，请尝试 select 如下：

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

因为使用 $("#num") 总是 return 你只有一个元素

演示参考：http://jsfiddle.net/49k92b68/1/

Answer 7

如果您的目标是递增每个 TD，那么您想使用 class 分配而不是 ID，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 中的数值

Change numeric value in td with jquery

html

javascript

jquery

html-table