Question

我有一张桌子。

<form >
    <div>   
    <table>
 <tr>        
       <td >  <input type="text" id="slno1" size="25" value="10" /> </td>     
       <td >  <input type="text" id="data" size="10" value="this is a test" /> </td>      
       <td >  <input type="radio"  value="" id="edit1" name="sample"  /> </td>    

  </tr>
   <tr>          
       <td >  <input type="text" id="slno2" size="25" value="10" /> </td>     
       <td >  <input type="text" id="data1" size="10" value="this is a test1" /> </td>    
       <td >  <input type="radio"  value="" id="edit1" name="sample"  /> </td>    
  </tr>
  </table>
  <input type="submit" id="mysu1" Value="submits" />  
    </div>
  </form>

当用户选择带有单选按钮的行时，我想要该行上的所有数据。所以，我们这样做：

var theSelectedRadioButton = theForm.find('input[name="sample"]:checked');

如何获取td中的所有相应值。

Answer 1

您可以使用单选按钮上的closest查找其中的tr，然后children查找该行中的所有td：

var tds = theSelectedRadioButton.closest('tr').children('td');

然后使用each或map从td中提取信息，可能在循环中。您还没有说明信息的位置，例如，如果您想要他们的HTML：

var tdhtml = theSelectedRadioButton.closest('tr').children('td').map(function(td) {
    return $(this).html();
}).get();

...会在tdhtml中生成一个包含每个td的HTML的字符串数组。（注意最后对get的轻松错过调用：map返回一个jQuery对象，即使它的内容不是DOM元素，get将其转换为普通数组。）

或者，如果信息存储在data-*的{{1}}个属性中（本例中为td）：

data-foo

Answer 2

var theSelectedRow = theSelectedRadioButton.closest('tr');

应该为您提供行，您可以从那里访问行中的数据。

除此之外：您可以将数据处理功能绑定到单选按钮，然后您无需“找到”它。

Answer 3

jsFiddle Demo

当目标输入字段的值发生变化时，您可以找到使用.closest()来查找相应的行，然后将每个子项的值收集到一个新对象中。

$(theForm).find('input[name="sample"]').change(function() {

    var vals = $(this).closest('tr').children('td').map( function() {
        return $(this).find('input').val();
    }).toArray();
});

jquery选择一个项目

3 个答案: