使用prototype / Javascript获取基于单选按钮的表格行 [英] Get table row based on radio button using prototype/Javascript

问题描述

我有一个名称和一个单选按钮的html表，如下所示：

 < table id =cars > 
< thead> 
< tr> 
< th> Car Name< / th> 
< th>< / th> 
< / tr> 
< / thead> 
< tbody> 
 
< tr> 
< td class =car>福特福克斯< / td> 
< td>< input type =radioid =selectedCarname =selectedCarvalue =8398>< / td> 
< / tr> 
 
< tr> 
< td class =car>林肯导航器< / td> 
< td>< input type =radioid =selectedCarname =selectedCarvalue =2994>< / td> 
< / tr> 
 
< / tbody> 
< / table> 
< input type =buttonvalue =Select Caronclick =selectCar（）>< / input> 
  

我希望能够选择单选按钮，然后点击另一个按钮并获取单选按钮（这是一个唯一的ID）以及汽车名称文本（如福特福克斯）。我应该如何编写selectCar方法？我已经尝试了几件事情：

  val1 = $（'tr input [name = selectedCar]：checked'）。 。父（）找到（ '＃汽车'）HTML（）。 
 val1 = $（td input [name ='selectedCar']：checked）。parents（）。find（'。cars'）。html（）; 
 val1 = $（'selectedCar'）。checked; 
  

但我无法获得正确的值。

我使用的是原型，但解决方案也可以是纯Javascript。 所有ID都必须是唯一的！

您可以尝试以下HTML：

 < tr> ; 
< td class =car>福特福克斯< / td> 
< td>< input type =radioid =selectedCar1name =selectedCarvalue =8398>< / td> 
< / tr> 
 
< tr> 
< td class =car>林肯导航器< / td> 
< td>< input type =radioid =selectedCar2name =selectedCarvalue =2994>< / td> 
< / tr> 
  

在此之后，您可以使用以下方式进行测试：

  val1 = $（'selectedCar1'）。checked; 
  

（返回 true 或<$ c $或者，如果你想抓取选定的值，可以使用。

w3.org/TR/DOM-Level-2-HTML/html.html#ID-71555259rel =nofollow noreferrer> getElementsByName ：

  function getCarValue（）
 {
 var theCars = document.getElementsByName（selectedCar）; 
 var i = theCars.length; 
 while（i--）{
 if（theCars [i] .checked）
返回theCars [i] .value; 
 
} 
} 
  

I have an html table that has a name and a radio button like so:

<table id="cars">
  <thead>
    <tr>
      <th>Car Name</th>
      <th></th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td class="car">Ford Focus</td>
      <td><input type="radio" id="selectedCar" name="selectedCar" value="8398"></td>
    </tr>

    <tr>
      <td class="car">Lincoln Navigator</td>
      <td><input type="radio" id="selectedCar" name="selectedCar" value="2994"></td>
    </tr>

  </tbody>
</table>
<input type="button" value="Select Car" onclick="selectCar()"></input>

I want to be able to select a radio button, then click another button and get the value of the radio button (which is a unique ID) as well as the car name text (like Ford Focus). How should I code the selectCar method? I've tried a few things like:

val1 = $('tr input[name=selectedCar]:checked').parent().find('#cars').html();
val1 = $("td input[name='selectedCar']:checked").parents().find('.cars').html();
val1 = $('selectedCar').checked;

but I can't get the proper values.

I'm using prototype, but the solution can be plain Javascript as well.

解决方案

All IDs have to be unique!

You can try with this HTML:

<tr>
  <td class="car">Ford Focus</td>
  <td><input type="radio" id="selectedCar1" name="selectedCar" value="8398"></td>
</tr>

<tr>
  <td class="car">Lincoln Navigator</td>
  <td><input type="radio" id="selectedCar2" name="selectedCar" value="2994"></td>
</tr>

After this, you can test using:

val1 = $('selectedCar1').checked;

(returns true or false).

Or, if you want to grab the selected value, use getElementsByName:

function getCarValue()
{
    var theCars = document.getElementsByName("selectedCar");
    var i = theCars.length;
    while (i--) {
        if(theCars[i].checked)
             return theCars[i].value;

    }
}

这篇关于使用prototype / Javascript获取基于单选按钮的表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！