当相应的单选按钮被点击时获取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表行信息

回答

相关问题