javascript - 选中复选框时，有没有办法增加 HTML 表格单元格的值（仅限整数）？

Question

有没有办法在选中复选框时增加 HTML 表格单元格的值（仅整数），然后在取消选中时删除添加？

我想使用一个复选框来更改单元格的值，我将它用作从 HTML 表格绘制的高图表上的过滤器。因此，如果单元格的值发生变化，并且我刷新图表，用户将看到图表点上升。同样，未选中的框会将值减小回原始数字。

我只找到了有关文本区域的答案，并且在将选择器分配给 td 时它失败了。

Answer 1

因为表格单元格没有值，所以您不能像设置文本框或文本区域那样设置值。

您将使用.text()或.html()设置该值。

var cell = $("#yourSelector");
var currentVal = parseInt(cell.text(), 10);
cell.text( currentVal + 1 );

Answer 2

给定 HTML 大致如下：

<table>
    <tbody>
        <tr>
            <td>
                <label>
                    <input type="checkbox" class="togglePlusOne" />
                    Add, or remove, 1
                </label>
            </td>
            <td>
                1
            </td>
        </tr>
    </tbody>
</table>

1然后下面的 jQuery 将允许在检查或取消检查时分别从文本值（转换为整数）发生加法或减法：

$('.togglePlusOne').change(function(){
    var nextCell = $(this).closest('td').next().toggleClass('oneAdded');
    nextCell.text(function(i,t){
        return parseInt(t,10) + ($(this).hasClass('oneAdded') ? 1 : -1);
    });
});

JS 小提琴演示。

参考：

• change().
• closest().
• 条件（“三元”）运算符 ( assessment ? ifTrue : ifFalse;)。
• hasClass().
• next().
• parseInt().
• text().
• toggleClass().

Answer 3

HTML

<table>
    <tbody>
        <tr>
            <td>
                <label>
                    <input type="checkbox" class="togglePlusOne" />Add, or remove, 1 <br>
                    <input type="checkbox" class="togglePlusOne" />Add, or remove, 1<br>
                    <input type="checkbox" class="togglePlusOne" />Add, or remove, 1<br>
                    <input type="checkbox" class="togglePlusOne" />Add, or remove, 1<br>
                    <input type="checkbox" class="togglePlusOne" />Add, or remove, 1<br>
                    <input type="checkbox" class="togglePlusOne" />Add, or remove, 1<br>
                </label>
            </td>
            <td id="tsCell">

            </td>
        </tr>
    </tbody>
</table>

JAVASCRIPT

<script>
   $(function(){
    var $tableCellObj = $("#tsCell");
    $('.togglePlusOne').click(function () {
             var cellValueInt = parseInt($tableCellObj.html());
             cellValueInt = isNaN(cellValueInt) ? 0:cellValueInt;
                  if(this.checked === true)    {
                      $tableCellObj.text(cellValueInt+1)
                  }else{
                      $tableCellObj.text(cellValueInt-1)
                 }
     });
});
</script>