I've a table which is dynamically generated. In its row, I'm placing buttons.

for (var i = 0; i < resp.length; i++) {    
  tr = tr + "<tr>";    
  tr = tr + "<td >" + resp[i].Date + "</td>";
  tr = tr + "<td >" + resp[i].age + "</td>";
  tr = tr + "<td >" + resp[i].Hour + "</td>";               
  tr = tr + "<td><input value='get me' type='button' class='theButton' id='ma' onclick='test()'></td>";
  tr = tr + "</tr>";
};

On a button click, I'd like to get the particular cell value of that row. E.g.: If I click on the age in the first row, then the value I have to get is 50. And if I click on the button in second row, then I should get 94.

How can I get the table cell value on a button click?

I've a table which is dynamically generated. In its row, I'm placing buttons.

for (var i = 0; i < resp.length; i++) {    
  tr = tr + "<tr>";    
  tr = tr + "<td >" + resp[i].Date + "</td>";
  tr = tr + "<td >" + resp[i].age + "</td>";
  tr = tr + "<td >" + resp[i].Hour + "</td>";               
  tr = tr + "<td><input value='get me' type='button' class='theButton' id='ma' onclick='test()'></td>";
  tr = tr + "</tr>";
};

On a button click, I'd like to get the particular cell value of that row. E.g.: If I click on the age in the first row, then the value I have to get is 50. And if I click on the button in second row, then I should get 94.

How can I get the table cell value on a button click?

• javascript
• jquery
• html

4 Answers 4

Here is your solution for dynamic table:

<script language="javascript">
    var tbl = document.getElementById("tblId");
    if (tbl != null) {
        for (var i = 0; i < tbl.rows.length; i++) {
            for (var j = 0; j < tbl.rows[i].cells.length; j++)
                tbl.rows[i].cells[j].onclick = function () { getval(this); };
        }
    }

    function getval(cel) {
        alert(cel.innerHTML);
    }
</script>

So, By using this javascript you can get value of any table cell.

You can pass age to button onclick function like onclick='test('"+resp[i].age +"')'

for (var i = 0; i < resp.length; i++) {

                tr = tr + "<tr>";

                tr = tr + "<td >" + resp[i].Date + "</td>";
                tr = tr + "<td >" + resp[i].age + "</td>";
                tr = tr + "<td >" + resp[i].Hour + "</td>";               
                tr = tr + "<td><input  value='get me' type='button' class='theButton' id='ma' onclick='test("+resp[i].age +")'></td>";

                tr = tr + "</tr>";


            };

Here is your solution:

$(document).find('.theButton').on('click',function(){
    var age = $(this).parents('tr:first').find('td:eq(1)').text();
    console.log(age);
});

Try this example with jQuery, I have replaced your function test, with rowid

https://jsfiddle/ucostea/2thyj0ft/

$(document).on("click", ".theButton", function(){
      alert("Aage: "+$('.age_'+$(this).attr('rownr')+'').text());
});
for (var i = 0; i < 10; i++) {
                              var tr = "";
                tr = tr + "<tr >";

                tr = tr + "<td class='date_"+i+"'>Date" + i + "</td>";
                tr = tr + "<td class='age_"+i+"'>Age " + i + "</td>";
                tr = tr + "<td class='hour_"+i+"'>Hour " + i + "</td>";               
                tr = tr + "<td><input  value='get me' type='button' class='theButton' id='ma' rownr='" + i + "'></td>";

                tr = tr + "</tr>";
                $('.table tbody').append(tr);


            };