Question

如果选中复选框，是否可以增加HTML表格单元格的值（仅限整数），然后在取消选中时删除添加内容？

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

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

Answer 1

因为表格单元格没有值，所以你不能像设置textboxes或textareas那样设置值。

您将使用.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>

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

$('.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 Fiddle demo

参考文献：

change()。
closest()。
Conditional ('ternary') operator (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>

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

3 个答案: