單擊相應的單選按鈕時獲取html表行信息

Question

我正在寫一個網頁，我要執行的任務之一是在文本框中顯示用戶單擊其相應行的單選按鈕時表中提供的信息（其數據由MySQL中的查詢確定）。 我設法使其正常運行，但只能運行一次。 如何使它每次都能工作？

非常感謝！

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：

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!");
            }
        }
    }

編輯：我將添加圖片我的問題是

在上面的圖片中，我單擊了第一個單選按鈕，相應的信息正確顯示在底部。

但是，在此按鈕中，當我單擊第二個按鈕並且單擊第一個按鈕時，信息不會更改。

Answer 1

為什么不做這樣的事情...

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

});

順便說一句，您不需要行中的.html() ，而只需要.text() 。 我也不會使用.parents()因為您只需要上兩個級別，因此只需鏈接2個父母即可。