Question

I have one table and in that table I am fetching data from database.

My table looks like below:

data row 1 | data row 1 | data row 1 | data row 1 | data row 1 | BUTTON1 |
data row 2 | data row 2 | data row 2 | data row 2 | data row 2 | BUTTON2 |

Now when I click on button from any row I want to grab the data of that respective row.

following is my code where I am assigning IDs dynamically.

echo "<tr id = ".$srno.">     
     <td style='width:25px'> <input id = 'checkbx' type = 'checkbox' name =".$row['item_id']."></input> </td>".    
    "<td> ". $srno ." </td> <td>".$row['item_name']."</td>".       
    "<td> ". $row['item_category']."</td>".      
    "<td style='width:50px'><input class = 'image_button mImg'   id = ".$srno." type = 'image' title = 'Modify' src = 'images/modify.png' onClick = 'modifyItem()' name = ".$srno."></input></td>".        
    "</tr>";

Can one help me to achieve this?

Answer 1

You could add a class to your <tr>:

<tr class="row-of-data">

Then have each add a click handler to all the buttons:

$(".myButton").click(function(){
   var rowOfData = $(this).closest(".row-of-data");
   // now do something with the row, like rowOfData.text()
 });

closest() will find travel up the DOM tree, finding the parent/ancestor that matches the selector. find() will do the same, but search children/descendants.

More likely you would put a class on each of the s and extract each one, or you just end up parsing the data again! So you might end up with

<td class="name">Hal Incandenza</td>

in the HTML, found by the jQuery bit

$(this).closest(".row-of-data").find(".name").text()