I have a table like below

<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>

When I click on a button, I want to increment the value of 3rd cell of the row incremented by 1. How can I get that value of that cell which is in the row in which the button was clicked.

I tried to create with id attribute with the <tr> tag of the table.

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

But is it possible to get without adding id to the table record?

I have a table like below

<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>

When I click on a button, I want to increment the value of 3rd cell of the row incremented by 1. How can I get that value of that cell which is in the row in which the button was clicked.

I tried to create with id attribute with the <tr> tag of the table.

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

But is it possible to get without adding id to the table record?

• javascript
• html-table

• 2 What have you tried? See the FAQ, please. – John Conde Commented Dec 13, 2012 at 14:49

4 Answers 4

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

if you can use jQuery

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

Here is plete solution, apart from JS function you also need to modify your HTML.

<script src="http://code.jquery./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>

With jQuery you can do:

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