Php jQuery函数查找表行中单击的按钮
很长一段时间以来,我一直在寻找解决方案,非常感谢您的帮助 我有一个表,它是通过php sql查询生成的,每行旁边有两个按钮,当用户单击其中一个按钮时,它将填充对话框中的订单 我有一个函数作用于jQuery中的click事件,但它读取表中第一行的第一个字段 这是我的功能Php jQuery函数查找表行中单击的按钮,php,javascript,jquery,exchange-server,commodity,Php,Javascript,Jquery,Exchange Server,Commodity,很长一段时间以来,我一直在寻找解决方案,非常感谢您的帮助 我有一个表,它是通过php sql查询生成的,每行旁边有两个按钮,当用户单击其中一个按钮时,它将填充对话框中的订单 我有一个函数作用于jQuery中的click事件,但它读取表中第一行的第一个字段 这是我的功能 $('.buy').click(function(){ if($('#buying').dialog('isOpen')) alert('Buy Box Already open'); else { $(".buycomm
$('.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>▲</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>▼</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>▼</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>▼</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>▲</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>
商品
密码
现行价格
过去价格
改变
体积
▲;
▼;
您可以使用html5数据属性来标记按钮。在下面的示例中,我给出了每个按钮相关产品的Id,但是您可以添加任意多的其他数据属性。还有一个示例如何获取单击按钮的行号
<!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>
按钮1
按钮2
按钮3
按钮4
$('.buy')。单击(函数(){
var prod_id=$(this.data('productId'))
警报(产品标识);
var row_number=$(this).closest(“tr”)[0].rowIndex;
警报(“行编号:+行编号);
});
您可以使用html5数据属性来标记按钮。在下面的示例中,我给出了每个按钮相关产品的Id,但是您可以添加任意多的其他数据属性。还有一个示例如何获取单击按钮的行号
<!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>
按钮1
按钮2
按钮3
按钮4
$('.buy')。单击(函数(){
var prod_id=$(this.data('productId'))
警报(产品标识);
var row_number=$(this).closest(“tr”)[0].rowIndex;
警报(“行编号:+行编号);
});
我希望这对您有所帮助:
$('.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);
});
我希望这能帮助你:
$('.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);
});
抱歉,我重新编辑了,希望问题现在有点清楚:)谢谢提供一些html代码(由php生成),或者最好让JSFIDLE sampleSome html成为可能,以便重写您的函数。无论如何,您应该使用$(this).parents()等在表行中分配正确的值。要分配正确的val(),是否尝试使用$('.buy')。单击处理程序分派自定义偶数,然后侦听event.target,然后查找父div?我只是按照建议尝试了event.target,当我点击按钮时,它会显示clicked:输入我已经更新了问题以包含请求的HTML源代码抱歉我重新编辑了,希望问题现在有点清楚:)谢谢提供一些HTML代码(由php生成),或者最好使用JSFIDLE sampleSome html,使重写函数成为可能。无论如何,您应该使用$(this).parents()等在表行中分配正确的值。要分配正确的val(),是否尝试使用$('.buy')。单击处理程序分派自定义偶数,然后侦听event.target,然后查找父div?我只是按照建议尝试了event.target,当我点击按钮时,它会说clicked:input我已经更新了问题,以根据请求包含HTML源代码。这就是问题所在。我真的很感谢大家的帮助:)谢谢大家和stackoverflow的服务:)就是这样。我真的很感谢您的帮助:)感谢大家和stackoverflow提供的这项服务:)