jQuery function to find which button in table row is clicked

Question

I been trying to find a solution for this for a long time and would really appreciate any help.

I have a table which is generated through a php sql query beside each row is two buttons Buy & Sell when the user clicks on either of the buttons it would populate an order form which is in a dialog box

I have a function which acts on the click event in jQuery but its reading the first fields of the first row in the table.

here is my function

$('.buy').click(function(){
if($('#buying').dialog('isOpen')) alert('Buy Box Already open');
else { 
   $(".buycommodity").val($(".commodity_name").val()+"
                 "+$(".commodity_code").val());
      $("#buyprice").val($(".commodity_price").val());
      $("#buyqty").val($(".commodity_volume").val());


      $('#buying').dialog('open'); 
    }}
    );

The question, how can I get the correct fields read and populated in the form? How can I get jQuery to know which button, on which row is clicked? All the type button have the same class i.e buy or sell

here is some HTML source of the table

<div id="exchange">
<form>
<table border="1" cellspacing="5" cellpadding="5">
<tr>
    <th>Commodity</th>
    <th>Code</th>
    <th>Current Price</th>
    <th>Past Price</th>
    <th>Change</th>
    <th>Volume</th>
        </tr>
        <tr valign='top'>
<td align=left>
   <input type="text" name="commodityname" value=Basmati readonly="readonly" id="commodityname" size=10>
</td>
<td align=left>
   <input type="text" name="commoditycode" value=1121 readonly="readonly" id="commoditycode" size=6>
</td>
<td align=absmiddle>
   <input type="text" name="currentprice" value=100 readonly="readonly" id="currentprice" size=4>
</td>
<td align=absmiddle>
   <input align=absmiddle type="text" name="pastprice" value=80 readonly="readonly" id="pasrprice" size=4>
</td>
<td align="absmiddle"><font size="3" color="blue"><em>&#x25B2;</em></font></td>
<td align=left><input type="text" name="commodityvolume" value=88000 readonly="readonly" id="commodityvolume" size=7>
</td>
   <input type=hidden id=commodity_id name=commodity_id value=1>
   <input type=hidden class=commodity_name name=commodity_name value=Basmati>
   <input type=hidden class=commodity_code name=commodity_code value=1121>
   <input type=hidden class=commodity_volume name=commodity_volume value=88000>
   <input type=hidden class=commodity_price name=commodity_price value=100>
<td>
   <input class=buy type=button name=orderbutton value=Buy>
</td>
<td>
   <input class=sell type=button name=orderbutton value=Sell>
</td>
</tr>
</form>
<tr valign='top'>
   <td align=left>
      <input type="text" name="commodityname" value=Basmati readonly="readonly" id="commodityname" size=10>
   </td>
   <td align=left>
      <input type="text" name="commoditycode" value=386 readonly="readonly" id="commoditycode" size=6>
  </td>
  <td align=absmiddle>
      <input type="text" name="currentprice" value=90 readonly="readonly" id="currentprice" size=4>
  </td>
  <td align=absmiddle><input align=absmiddle type="text" name="pastprice" value=100 readonly="readonly" id="pasrprice" size=4>
  </td>
  <td align="absmiddle"><font size="3" color="red"><em>&#x25BC;</em></font></td>
  <td align=left><input type="text" name="commodityvolume" value=44000 readonly="readonly" id="commodityvolume" size=7>
  </td><input type=hidden id=commodity_id name=commodity_id value=2>
   <input type=hidden class=commodity_name name=commodity_name value=Basmati>
   <input type=hidden class=commodity_code name=commodity_code value=386>
   <input type=hidden class=commodity_volume name=commodity_volume value=44000>
   <input type=hidden class=commodity_price name=commodity_price value=90><td>
   <input class=buy type=button name=orderbutton value=Buy></td>
                         <td><input class=sell type=button name=orderbutton value=Sell></td></tr
   </form>
 <tr valign='top'>
   <td align=left>
     <input type="text" name="commodityname" value=Basmati readonly="readonly" id="commodityname" size=10></td>
     <td align=left><input type="text" name="commoditycode" value=385 readonly="readonly" id="commoditycode" size=6></td>
    <td align=absmiddle><input type="text" name="currentprice" value=75 readonly="readonly" id="currentprice" size=4>
    </td>
    <td align=absmiddle><input align=absmiddle type="text" name="pastprice" value=88 readonly="readonly" id="pasrprice" size=4></td>
    <td align="absmiddle"><font size="3" color="red"><em>&#x25BC;</em></font></td>
    <td align=left>
      <input type="text" name="commodityvolume" value=24000 readonly="readonly" id="commodityvolume" size=7></td>
      <input type=hidden id=commodity_id name=commodity_id value=3>
      <input type=hidden class=commodity_name name=commodity_name value=Basmati>
      <input type=hidden class=commodity_code name=commodity_code value=385>
      <input type=hidden class=commodity_volume name=commodity_volume value=24000>
      <input type=hidden class=commodity_price name=commodity_price value=75><td>
      <input class=buy type=button name=orderbutton value=Buy></td>
                         <td><input class=sell type=button name=orderbutton value=Sell></td></tr>
      </form>
      <tr valign='top'><td align=left>
      <input type="text" name="commodityname" value=Ierro readonly="readonly" id="commodityname" size=10></td><td align=left>
      <input type="text" name="commoditycode" value=6 readonly="readonly" id="commoditycode" size=6></td><td align=absmiddle>
      <input type="text" name="currentprice" value=33 readonly="readonly" id="currentprice" size=4></td><td align=absmiddle>
      <input align=absmiddle type="text" name="pastprice" value=39 readonly="readonly" id="pasrprice" size=4></td><td align="absmiddle"><font size="3" color="red"><em>&#x25BC;</em></font>
    </td><td align=left>
      <input type="text" name="commodityvolume" value=124000 readonly="readonly" id="commodityvolume" size=7></td>
      <input type=hidden id=commodity_id name=commodity_id value=4>
      <input type=hidden class=commodity_name name=commodity_name value=Ierro>
      <input type=hidden class=commodity_code name=commodity_code value=6>
      <input type=hidden class=commodity_volume name=commodity_volume value=124000>
      <input type=hidden class=commodity_price name=commodity_price value=33><td>
      <input class=buy type=button name=orderbutton value=Buy></td>
      <td><input class=sell type=button name=orderbutton value=Sell></td></tr></form>
<tr valign='top'><td align=left>
      <input type="text" name="commodityname" value=Ierro readonly="readonly" id="commodityname" size=10>
  </td>
     <td align=left>
      <input type="text" name="commoditycode" value=9 readonly="readonly" id="commoditycode" size=6></td><td align=absmiddle>
      <input type="text" name="currentprice" value=79 readonly="readonly" id="currentprice" size=4></td><td align=absmiddle>
      <input align=absmiddle type="text" name="pastprice" value=60 readonly="readonly" id="pasrprice" size=4></td><td align="absmiddle"><font size="3" color="blue"><em>&#x25B2;</em></font></td><td align=left>
      <input type="text" name="commodityvolume" value=24000 readonly="readonly" id="commodityvolume" size=7></td>
      <input type=hidden id=commodity_id name=commodity_id value=5>
      <input type=hidden class=commodity_name name=commodity_name value=Ierro>
      <input type=hidden class=commodity_code name=commodity_code value=9>
      <input type=hidden class=commodity_volume name=commodity_volume value=24000>
      <input type=hidden class=commodity_price name=commodity_price value=79><td>
      <input class=buy type=button name=orderbutton value=Buy></td>
      <td><input class=sell type=button name=orderbutton value=Sell></td></tr></form></table
      </div>

Answer 1

I hope this helps you out:

$('.buy').click(function() {
 var trRef=$(this).parent().parent(); //double parent() to get reference of TR, that holds the button in action
 var commodity_name = $(trRef).find('.commodity_name').val();
 var commodity_code = $(trRef).find('.commodity_code').val();
 var commodity_price = $(trRef).find('.commodity_price').val();
 var commodity_volume = $(trRef).find('.commodity_volume').val();

 $(".buycommodity").val(commodity_name+" "+commodity_code);
  $("#buyprice").val(commodity_price);
  $("#buyqty").val(commodity_volume);
});

Answer 2

You can use html5 data- attributes to mark your buttons. In the following example I gave each button related product's Id, but you can add as many other data- attributes as you wish. There is also an example how to get the row number of the clicked button.

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
    </head>
    <body>
        <table>
            <tr>
                <td><button class="buy" data-product-id="1" >button 1</button></td>
                <td><button class="buy" data-product-id="2" >button 2</button></td>
            </tr>
            <tr>
                <td><button class="buy" data-product-id="3" >button 3</button></td>
                <td><button class="buy" data-product-id="4" >button 4</button></td>
            </tr>
        </table>

        <script>
            $('.buy').click(function(){             
                var prod_id = $(this).data('productId')
                alert(prod_id);
                var row_number = $(this).closest("tr")[0].rowIndex;
                alert("row number: "+row_number);
            });
        </script>
    </body>
</html>