Question

我有一张如下表格

<table>
<tr>
<td>Item1</td><td>Price-100</td><td>1</td><td><input type="button" value="add one"/>
</tr>
<tr>
<td>Item2</td><td>Price-120</td><td>4</td><td><input type="button" value="add one"/>
</tr>
<tr>
<td>Item3</td><td>Price-90</td><td>2</td><td><input type="button" value="add one"/>
</tr>
</table>

当我点击一个按钮时，我想增加行的第三个单元格的值，增加1.如何获得该单元格的值，该单元格位于单击该按钮的行中。

我尝试使用表格的<tr>标记创建id属性。

var tableRow = $('#tr1').find('td');
var origVal = parseInt($(tableRow[2]).text());
origVal+=1;
$(tableRow[2]).text(origVal);

但是，如果不在表记录中添加id，是否可以获得？

Answer 1

<script>
function inc()
{
  var val = parseInt(document.getElementById('myid').value);
  val++;
  document.getElementById('myid').value =val;
}
</script>

Answer 2

如果您可以使用jQuery

$('table input[type="button"]').click(function() {
        cell = $(this).parent().prev();
        cell.text(parseInt(cell.text()) + 1);
    });

Answer 3

这是完整的解决方案，除了JS功能之外，您还需要修改HTML。

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function increment(row)
    {
        var row = row -1;
        var existing_value = Number($('#mytable tr:eq('+row+') > td:eq(2)').text());
        $('#mytable tr:eq('+row+') > td:eq(2)').text(existing_value+1)
    }
</script>

<table id="mytable">
    <tr>
        <td>Item1</td><td>Price-100</td><td>1</td><td><input type="button" value="add one" onClick="increment(1);" />
    </tr>
    <tr>
        <td>Item2</td><td>Price-120</td><td>4</td><td><input type="button" value="add one" onClick="increment(2);" />
    </tr>
    <tr>
        <td>Item3</td><td>Price-90</td><td>2</td><td><input type="button" value="add one" onClick="increment(3);" />
    </tr>
</table>

Answer 4

使用jQuery，您可以：

<script>
    $('table button').click(function() {
        var $td = $(this).parent().prev();
        var val = parseInt($td.text(), 10) + 1;
        $td.text(val);
    });
</script>

获取在HTML表格中按下按钮的行

4 个答案: