[英]Get html table row information when it's corresponding radiobutton is clicked
I am writing a web page and one of the tasks I want it to do is show in textboxes the information provided in a table (whose data is determined by a query in MySQL) when the user clicks its corresponding row's radio button. 我正在写一个网页,我要执行的任务之一是在文本框中显示用户单击其相应行的单选按钮时表中提供的信息(其数据由MySQL中的查询确定)。 I managed to get it to work, but it only works one time.
我设法使其正常运行,但只能运行一次。 How can I make it work every time?
如何使它每次都能工作?
Thank you so much! 非常感谢!
HTML and PHP Code: HTML和PHP代码:
<table style="width=100%;border: 1px solid black" id="tablaListado" cellspacing="10">
<tr style="border-bottom-style:solid;border-width:1px;border-color:#1e1e1e;text-align: -webkit-center;background:#22CECE;font-size: 16px;">
<th style = "border: 1px solid black">Elegir</th>
<th style = "border: 1px solid black">SKU</th>
<th style = "border: 1px solid black">ISBN 13</th>
<th style = "border: 1px solid black">Titulo</th>
<th style = "border: 1px solid black">Proveedor</th>
<th style = "border: 1px solid black">Costo</th>
<th style = "border: 1px solid black">Precio</th>
</tr>
<?php
$result = faltanteCostos();
if(mysql_num_rows($result) >0){
while($registroDD = mysql_fetch_assoc($result)){
echo "<tr style='border: 1px solid black'>
<td style='border: 1px solid black'>
<input type='radio' id='regular' name='optradio' onclick='llenarInfo()'>
</td>
<td class='sku' style='border: 1px solid black'>".$registroDD['art_SKU']."</td>
<td class='isbn13' style='border: 1px solid black'>".$registroDD['art_N13']."</td>
<td class='titulo' style='border: 1px solid black'>".$registroDD['art_titulo']."</td>
<td class='prov' style='border: 1px solid black'>".$registroDD['art_id_proveedor']."</td>
<td class='costo' style='border: 1px solid black'>".$registroDD['art_cost']."</td>
<td class='precio' style='border: 1px solid black'>".$registroDD['art_precio']."</td>
</tr>";
}
}
?>
</table>
JS: JS:
function llenarInfo(){
var d = document.getElementsByName('optradio');
for (var i = 0; i < d.length; i++) {
if (d[i].checked) {
document.getElementById("insku").value = $("td input[name='optradio']:checked").parents().find('.sku').html();
document.getElementById("inisbn").value = $("td input[name='optradio']:checked").parents().find('.isbn13').html();
document.getElementById("intit").value = $("td input[name='optradio']:checked").parents().find('.titulo').html();
document.getElementById("inprov").value = $("td input[name='optradio']:checked").parents().find('.prov').html();
document.getElementById("incost").value = $("td input[name='optradio']:checked").parents().find('.costo').html();
document.getElementById("inprecio").value = $("td input[name='optradio']:checked").parents().find('.precio').html();
console.log("yes!");
}
}
}
Edit: I will add pictures of what my problem is 编辑:我将添加图片我的问题是
In the picture above I clicked the first radio button and the corresponding information appeared correctly on the bottom. 在上面的图片中,我单击了第一个单选按钮,相应的信息正确显示在底部。
In this one, however, when I click the second button and I have clicked the first one before the information doesn't change. 但是,在此按钮中,当我单击第二个按钮并且单击第一个按钮时,信息不会更改。
Why not do something like this... 为什么不做这样的事情...
$('input[type="radio"]').on('click', function(){
var value1 = $(this).parent().parent().find('.classYouWant').text();
var value2 = $(this).parent().parent().find('.classYouWant').text();
$('#idOfInputBox1').val(value1);
$('#idOfInputBox2').val(value2);
});
By the way, you don't want .html()
from your row, you just want the .text()
. 顺便说一句,您不需要行中的
.html()
,而只需要.text()
。 I also wouldn't use .parents()
because you only need to go up two levels, so just chain 2 parents. 我也不会使用
.parents()
因为您只需要上两个级别,因此只需链接2个父母即可。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.