1

私は長い間これに対する解決策を見つけようとしてきましたが、本当に助けていただければ幸いです。

各行の横にphp sqlクエリを介して生成されるテーブルがあります。ユーザーがボタンのいずれかをクリックすると、ダイアログボックスにある注文フォームに入力される2つのボタンBuy＆Sellがあります。

jQueryのクリックイベントに作用する関数がありますが、テーブルの最初の行の最初のフィールドを読み取ります。

ここに私の機能があります

$('.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'); 
    }}
    );

質問は、正しいフィールドを読み取ってフォームに入力するにはどうすればよいですか? どのボタン、どの行がクリックされたかをjQueryに知らせるにはどうすればよいですか? タイプボタンはすべて同じクラス、つまり買いまたは売りです。

ここにテーブルのHTMLソースがあります

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

2 に答える 2

3

html5 の data- 属性を使用してボタンをマークできます。次の例では、各ボタンに関連する製品の ID を指定しましたが、必要に応じて他の data- 属性をいくつでも追加できます。クリックされたボタンの行番号を取得する方法の例もあります。

<!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>
于 2012-08-18T11:19:30.230 に答える
2

これがお役に立てば幸いです。

$('.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);
});
于 2012-08-18T13:26:14.283 に答える