當相應的單選按鈕被點擊時獲取html錶行信息

我正在編寫一個網頁，我希望它做的任務之一是在文本框中顯示錶中提供的信息（其數據由MySQL中的查詢確定）當用戶點擊其對應的行的單選按鈕時。我設法讓它工作，但它只能使用一次。我怎樣才能讓它每次都有效？當相應的單選按鈕被點擊時獲取html錶行信息

非常感謝！

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

編輯：我的問題是什麼

在上面我的圖片，我將添加的圖片點擊第一個單選按鈕，相應的信息正確顯示o底部。

在這其中，然而，當我點擊第二個按鈕，我已經點擊了第一個收到的資料不會改變。

來源

2017-02-24 Julio Garcia

爲什麼不創建一個工作示例？如果僅僅是點擊javascript問題，我們需要的僅僅是HTML，JavaScript和一些CSS。沒有PHP。請再讀一遍：http://stackoverflow.com/help/mcve並用我們需要的相關代碼編輯您的問題。 – caramba

你有一個奇怪的混合jQuery和正常的DOM方法。最好挑一個並堅持下去。在這個例子中，當你需要的是'$（「td input [name ='optradio']：checked」）。parents（）。find（'。sku'）' [']）。closest（'tr'）。find（'。ski'）。html（）'，儘管我不確定爲什麼要將表單元素的值設置爲HTML; '.text（）'可能會更好。 –

@MikeMcCaughan你讓我在那裏。說實話，我對JavaScript有點新了，這就是爲什麼你會看到這種奇怪的混合。謝謝，我現在會解決它！：d –

爲什麼不這樣做？

$('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家長。

來源

2017-02-24 16:30:20 Slime

當相應的單選按鈕被點擊時獲取html錶行信息

回答

相關問題