php - jQuery function to find which button in table row is clicked

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 { 
   $(".buymodity").val($("modity_name").val()+"
                 "+$("modity_code").val());
      $("#buyprice").val($("modity_price").val());
      $("#buyqty").val($("modity_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="modityname" value=Basmati readonly="readonly" id="modityname" size=10>
</td>
<td align=left>
   <input type="text" name="moditycode" value=1121 readonly="readonly" id="moditycode" 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="modityvolume" value=88000 readonly="readonly" id="modityvolume" size=7>
</td>
   <input type=hidden id=modity_id name=modity_id value=1>
   <input type=hidden class=modity_name name=modity_name value=Basmati>
   <input type=hidden class=modity_code name=modity_code value=1121>
   <input type=hidden class=modity_volume name=modity_volume value=88000>
   <input type=hidden class=modity_price name=modity_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="modityname" value=Basmati readonly="readonly" id="modityname" size=10>
   </td>
   <td align=left>
      <input type="text" name="moditycode" value=386 readonly="readonly" id="moditycode" 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="modityvolume" value=44000 readonly="readonly" id="modityvolume" size=7>
  </td><input type=hidden id=modity_id name=modity_id value=2>
   <input type=hidden class=modity_name name=modity_name value=Basmati>
   <input type=hidden class=modity_code name=modity_code value=386>
   <input type=hidden class=modity_volume name=modity_volume value=44000>
   <input type=hidden class=modity_price name=modity_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="modityname" value=Basmati readonly="readonly" id="modityname" size=10></td>
     <td align=left><input type="text" name="moditycode" value=385 readonly="readonly" id="moditycode" 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="modityvolume" value=24000 readonly="readonly" id="modityvolume" size=7></td>
      <input type=hidden id=modity_id name=modity_id value=3>
      <input type=hidden class=modity_name name=modity_name value=Basmati>
      <input type=hidden class=modity_code name=modity_code value=385>
      <input type=hidden class=modity_volume name=modity_volume value=24000>
      <input type=hidden class=modity_price name=modity_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="modityname" value=Ierro readonly="readonly" id="modityname" size=10></td><td align=left>
      <input type="text" name="moditycode" value=6 readonly="readonly" id="moditycode" 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="modityvolume" value=124000 readonly="readonly" id="modityvolume" size=7></td>
      <input type=hidden id=modity_id name=modity_id value=4>
      <input type=hidden class=modity_name name=modity_name value=Ierro>
      <input type=hidden class=modity_code name=modity_code value=6>
      <input type=hidden class=modity_volume name=modity_volume value=124000>
      <input type=hidden class=modity_price name=modity_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="modityname" value=Ierro readonly="readonly" id="modityname" size=10>
  </td>
     <td align=left>
      <input type="text" name="moditycode" value=9 readonly="readonly" id="moditycode" 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="modityvolume" value=24000 readonly="readonly" id="modityvolume" size=7></td>
      <input type=hidden id=modity_id name=modity_id value=5>
      <input type=hidden class=modity_name name=modity_name value=Ierro>
      <input type=hidden class=modity_code name=modity_code value=9>
      <input type=hidden class=modity_volume name=modity_volume value=24000>
      <input type=hidden class=modity_price name=modity_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>

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

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 { 
   $(".buymodity").val($(".modity_name").val()+"
                 "+$(".modity_code").val());
      $("#buyprice").val($(".modity_price").val());
      $("#buyqty").val($(".modity_volume").val());


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

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="modityname" value=Basmati readonly="readonly" id="modityname" size=10>
</td>
<td align=left>
   <input type="text" name="moditycode" value=1121 readonly="readonly" id="moditycode" 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="modityvolume" value=88000 readonly="readonly" id="modityvolume" size=7>
</td>
   <input type=hidden id=modity_id name=modity_id value=1>
   <input type=hidden class=modity_name name=modity_name value=Basmati>
   <input type=hidden class=modity_code name=modity_code value=1121>
   <input type=hidden class=modity_volume name=modity_volume value=88000>
   <input type=hidden class=modity_price name=modity_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="modityname" value=Basmati readonly="readonly" id="modityname" size=10>
   </td>
   <td align=left>
      <input type="text" name="moditycode" value=386 readonly="readonly" id="moditycode" 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="modityvolume" value=44000 readonly="readonly" id="modityvolume" size=7>
  </td><input type=hidden id=modity_id name=modity_id value=2>
   <input type=hidden class=modity_name name=modity_name value=Basmati>
   <input type=hidden class=modity_code name=modity_code value=386>
   <input type=hidden class=modity_volume name=modity_volume value=44000>
   <input type=hidden class=modity_price name=modity_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="modityname" value=Basmati readonly="readonly" id="modityname" size=10></td>
     <td align=left><input type="text" name="moditycode" value=385 readonly="readonly" id="moditycode" 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="modityvolume" value=24000 readonly="readonly" id="modityvolume" size=7></td>
      <input type=hidden id=modity_id name=modity_id value=3>
      <input type=hidden class=modity_name name=modity_name value=Basmati>
      <input type=hidden class=modity_code name=modity_code value=385>
      <input type=hidden class=modity_volume name=modity_volume value=24000>
      <input type=hidden class=modity_price name=modity_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="modityname" value=Ierro readonly="readonly" id="modityname" size=10></td><td align=left>
      <input type="text" name="moditycode" value=6 readonly="readonly" id="moditycode" 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="modityvolume" value=124000 readonly="readonly" id="modityvolume" size=7></td>
      <input type=hidden id=modity_id name=modity_id value=4>
      <input type=hidden class=modity_name name=modity_name value=Ierro>
      <input type=hidden class=modity_code name=modity_code value=6>
      <input type=hidden class=modity_volume name=modity_volume value=124000>
      <input type=hidden class=modity_price name=modity_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="modityname" value=Ierro readonly="readonly" id="modityname" size=10>
  </td>
     <td align=left>
      <input type="text" name="moditycode" value=9 readonly="readonly" id="moditycode" 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="modityvolume" value=24000 readonly="readonly" id="modityvolume" size=7></td>
      <input type=hidden id=modity_id name=modity_id value=5>
      <input type=hidden class=modity_name name=modity_name value=Ierro>
      <input type=hidden class=modity_code name=modity_code value=9>
      <input type=hidden class=modity_volume name=modity_volume value=24000>
      <input type=hidden class=modity_price name=modity_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>

Share Improve this question edited Nov 12, 2014 at 6:41 Sarim Javaid Khan 83015 silver badges30 bronze badges asked Aug 18, 2012 at 9:49 Sammy 151 silver badge4 bronze badges

sorry I re-edited, hope the question is a bit clear now :) Thanks – Sammy Commented Aug 18, 2012 at 9:56
1 provide some html code (generated by php), or better make jsfiddle sample – deerua Commented Aug 18, 2012 at 10:06
1 Some html please to make rewriting your function possible. anyway you should assign the right values in the table row by using $(this).parents() etc. to assign the right val() – Martin van Dam Commented Aug 18, 2012 at 10:13
Have you tried to have your $('.buy').click handler dispatch a custom even and then listen for event.target, and then look for the parent div? api.jquery./event.target – widged Commented Aug 18, 2012 at 11:20
I just tried the event.target as suggested and when i click on button it says clicked: input I have updated the question to include HTML source as requested – Sammy Commented Aug 18, 2012 at 13:21

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

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

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 modity_name = $(trRef).find('.modity_name').val();
 var modity_code = $(trRef).find('.modity_code').val();
 var modity_price = $(trRef).find('.modity_price').val();
 var modity_volume = $(trRef).find('.modity_volume').val();

 $(".buymodity").val(modity_name+" "+modity_code);
  $("#buyprice").val(modity_price);
  $("#buyqty").val(modity_volume);
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

php - jQuery function to find which button in table row is clicked - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)