每次单击按钮时，如何使用 jQuery 将表格单元格增加 1？答案

【问题标题】：How can I use jQuery to increment a table cell by 1 each time the button is clicked?每次单击按钮时，如何使用 jQuery 将表格单元格增加 1？
【发布时间】：2015-04-06 21:02:15
【问题描述】：

这是我的html：

<table class="myTable" summary="Table with ages">       
    <tr>
        <th>Name</th>
        <th>Age</th>            
    </tr>   

    <tr>
        <td>Joe</td>
        <td id="joesAge">35</td>
    </tr>

    <tr>
        <td>Becky</td>
        <td id="beckysAge">40</td>
    </tr>

    <tr>
        <td>Joey</td>
        <td id="joeysAge">50</td>
    </tr>                   
</table>

<button onclick="add">Add</button>

每次单击添加按钮时，我需要将单元格 joesAge、beckysAge 和 joeysAge 每次递增 1。有人可以帮助我吗？

【问题讨论】：

您好 Michelle，请确保您已经发布了您尝试过的内容。
我已经编辑了您的帖子，以便您的 HTML 格式更好。如果您能够发布您已经尝试过的 jQuery，我相信有人会帮助您解决您的问题。

标签： jquery html-table cell increment

【解决方案1】：

这是一个 jsFiddle 显示我的示例解决方案。

$(function () {

    $(document).on('click', 'button', function () {

      var userId = ['#joesAge', '#beckysAge', '#joeysAge'];

      $.each(userId, function (index, value) {

         var age = parseInt($(value).text(), 10);

         if (age) {
             $(value).text(age + 1);
         }

      });
   });
});

我使用了.on('click') 事件来绑定按钮点击，我还硬编码了td 元素 ID，它可以（应该）被写入处理表格中的 any 元素 ID例如，其中包含“年龄”一词。

更新

$(function () {

// bind button click:
$(document).on('click', 'button', function () {

    // array for IDs:
    var items = [];

    // find all TD ID's which contains "Age":
    $(".myTable tr td[id*='Age']").each(function() {

        var id = $(this).attr('id');            

        if(id) {   
            // add *Age IDs ready to be incremented:  
            items.push('#' + id);
        }

     });

    // Loop through all ID's and increment by 1:
    $.each(items, function (index, value) {

        var age = parseInt($(value).text(), 10);

        if (age) {
            $(value).text(age + 1);
        }
    });
});
});

我更新了我的JsFiddle，它处理任何td 元素，其属性ID 包含单词“Age”

【讨论】：

【解决方案2】：

这里有一个解决方案：

<script type="text/javascript">
function add(){

    // solution
    // get the row you want
    // get the value, parseInt it and increment by 1
    // replace the content of the row by incremented value

    var joesAgeTd = document.getElementById("joesAge");
    var newJoesAge = parseInt(joesAgeTd.innerHTML) + 1;
    joesAgeTd.innerHTML = newJoesAge;

    var beckysAgeTd = document.getElementById("beckysAge");
    var newbeckysAge = parseInt(beckysAgeTd.innerHTML) + 1;
    beckysAgeTd.innerHTML = newbeckysAge;

    var joeysAgeTd = document.getElementById("joeysAge");
    var newjoeysAge = parseInt(joeysAgeTd.innerHTML) + 1;
    joeysAgeTd.innerHTML = newjoeysAge;
}
</script>
<table class="myTable" summary="Table with ages">
    <tr>
        <th >Name</th>
        <th>Age</th>
    </tr>

    <tr>
        <td>Joe</td>
        <td id="joesAge">35</td>
    </tr>

    <tr>
        <td>Becky</td>
        <td id="beckysAge">40</td>
    </tr>

    <tr>
        <td>Joey</td>
        <td id="joeysAge">50</td>
    </tr>
</table>
<button onclick="add()">Add</button>

【讨论】：