Jquery通过td中的隐藏输入字段值选择tr [英] Jquery Select a tr by an hidden input field value inside a td

问题描述

我是jQuery语言的初学者，我有一个问题。

我的网站上有一个像这样的表：

 < table id =filter-tableclass =table table-striped> 
< thead> 
< tr> 
< th> Code< / th> 
< th>名称< / th> 
< th>类型学< / th> 
< th>选择< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td> IYCE8< / td> 
< td> NAME< / td> 
< td> 
< input class ='typology'type ='hidden'value ='1'> TYPE1 
< input class ='typology'type ='hidden'value ='2'> TYPE2 
< input class ='typology'type ='hidden'value ='3'> TYPE3 
< / td> 
< td> 
< input type =checkbox> 
< / td> 
< / tr> 
< tr> 
< td> IYCE9< / td> 
< td> NAME2< / td> 
< td> 
< input class ='typology'type ='hidden'value ='1'> TYPE1 
< input class ='typology'type ='hidden'value ='2'> TYPE2 
< / td> 
< td> 
< input type =checkbox> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
  

因为你可以看到行有一个与类型相关的隐藏输入（type1 => 1）。 / p>

使用下拉选择器我选择一个值：

 < select id =filtername =filter> 
< option value => SELECT ONE< / option> 
< option value =1> TYPE1< / option> 
< option value =2> TYPE2< / option> 
< option value =3> TYPE3< / option> 
< / select> 
  

使用过滤器中的事件OnChange我想选择表中具有输入的所有行字段值=到下拉列表中选择的字段

如何使用Jquery执行此操作？
提前致谢所有帮助

解决方案

您可以合并属性选择器和 ： （）选择器：

示例

  $（'＃filter'）。on（'change'，function（ ）{
 var $ tr = $（'＃filter-table tr：has（.typology [value ='+ this.value +']）'）; 
}）; 
  

在上面的代码段中， $ tr 是一个jQuery对象，其中包含所有desendant tr 元素，这些元素包含一个类为 .typology 的元素和一个value属性对应于所选值。

I'm a beginner with jQuery language and I've got a question.

I've got a Table in my website like this:

<table id="filter-table" class="table table-striped">
  <thead>
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Typology</th>
      <th>Select</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>IYCE8</td>
      <td>NAME</td>
      <td>
        <input class='typology' type='hidden' value='1'>TYPE1
        <input class='typology' type='hidden' value='2'>TYPE2
        <input class='typology' type='hidden' value='3'>TYPE3
      </td>
      <td>
        <input type="checkbox">
      </td>
    </tr>
    <tr>
      <td>IYCE9</td>
      <td>NAME2</td>
      <td>
        <input class='typology' type='hidden' value='1'>TYPE1
        <input class='typology' type='hidden' value='2'>TYPE2
      </td>
      <td>
        <input type="checkbox">
      </td>
    </tr>
  </tbody>
</table>

as you can see rows have an hidden input associated to a typology (type1=>1).

with a dropdown selector i choose a value:

<select id="filter" name="filter">
  <option value="">SELECT ONE</option>
  <option value="1">TYPE1</option>
  <option value="2">TYPE2</option>
  <option value="3">TYPE3</option>
</select> 

With the event OnChange in a filter i want to select all the rows in the table that have the input field value = to the one selected in the dropdown

How i can do this with Jquery? Thanks in advance for all the help

解决方案

You could combine an attribute selector and the :has() selector:

Example Here

$('#filter').on('change', function () {
  var $tr = $('#filter-table tr:has(.typology[value="' + this.value + '"])');
});

In the snippet above, $tr is a jQuery object that contains all the desendant tr elements that contain an element with a class of .typology and a value attribute corresponding to the selected value.

这篇关于Jquery通过td中的隐藏输入字段值选择tr的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！