Question

我尝试在点击按钮后显示包含所选文本的所有行，这是我的代码：

<select>
 <option>text1</option>
 <option>text2</option>
 <option>text3</option>
 <option>text4</option>
</select>
<button class="show"></button>
<button class="hide"></button>
<table>
 <tr>
  <td>text1</td><td>....</td>
 </tr>
 <tr>
  <td>text2</td><td>....</td>
 </tr>
 <tr>
  <td>text3</td><td>....</td>
 </tr>
 <tr>
  <td>text1</td><td>....</td>
 </tr>
</table>

我尝试做这样的事情，但它不起作用：

$(function(){
  b = $("tr");
  $(".show").on("click", function(){
   var a = $("select option:selected").text();
   $(b).hide();
   if ($("tr:contains('"+a+"')").length) 
    $(this).closest(tr).show();
 });

 $(".hide").on("click", function(){
  $(b).show();              
 });    
});

有人可以帮助我，请：）

Answer 1

你需要这样的东西。不要污染全球空间并使用适当的选择器。并且不需要再次包装jQuery对象。

$(function() {
    var b = $("table");
    $(".show").on("click", function() {
        var a = $("select option:selected").text();
        b.find("tr").hide().end().find("td:contains('" + a + "')").parent().show();
    });
    $(".hide").on("click", function() {
        b.find("tr").show();
    });
});

Answer 2

试试这个：您可以使用each检查每个tr选定的选项文字并使其可见。无需使用closest('tr')，因为$(this)本身就是TR。

$(function(){
  b = $("tr");
  $(".show").on("click", function(){
   var a = $("select option:selected").text();
   b.hide();
   //if ($("tr:contains('"+a+"')").length) 
   // $(this).closest(tr).show();
   b.each(function(){
     if($(this).text().indexOf(a)!=-1)
     {
       $(this).show();
     }
  });
 });

 $(".hide").on("click", function(){
  b.show();              
 });    
});

Answer 3

您不能使用contains导致匹配任何简单包含test的元素（选择包含指定文本的所有元素）。您可以使用each并将任何td与相同的文字匹配并显示父级（tr），如：

＆＃13;

b = $("tr");
$(".show").on("click", function() {
  var a = $("select option:selected").text();
  $(b).hide();
  $("td").each(function() {
    if ($(this).text() == a) {
      $(this).parents("tr").show();
    }
  });
});

$(".hide").on("click", function() {
  $(b).show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>text1</option>
  <option>text2</option>
  <option>text3</option>
  <option>text4</option>
</select>
<button class="show">show</button>
<button class="hide">hide</button>
<table>
  <tr>
    <td>text1</td>
    <td>....</td>
  </tr>
  <tr>
    <td>text2</td>
    <td>....</td>
  </tr>
  <tr>
    <td>text3</td>
    <td>....</td>
  </tr>
  <tr>
    <td>text1</td>
    <td>....</td>
  </tr>
</table>

＆＃13;

Answer 4

让你的按钮直接在这里运行。

function show() {
   var needle = $("select option:selected").text();
   $('#myTable td').each(function() {
        if ($(this).text() === needle) $(this).show();
   });
}
function hide() {
   var needle = $("select option:selected").text();
   $('#myTable td').each(function() {
        if ($(this).text() === needle) $(this).hide();
   });
}

Take a look at this (jsFiddle)

jQuery的。查找所有包含所选<option> </option>的文本

4 个答案: