从下拉菜单中隐藏所有包含td值的行

Question

iam试图隐藏表中除<td>之外的所有行，其中包含与从下拉列表中选择的用户相同的文本。认为它应该是容易的，但IM与它挣扎了很久了......我想是这样的：

$(document).ready(function() { 
    $('select[name=selectName]').change(function() { 
     $("td").each(function(index, paragraph) { 
      $td = $(paragraph); 
      if ($td.html() === $('select[name=selectName]').val()) { 
       //hide the matched row rather than remove it 
       $(not(this)).parent("tr:first").hide(); 
      } 
     }); 
     $('select[name="selectName"]').on('change', function() { 
      $("tr").show(); 
     }); 
    }); 
}); 

但它没有工作，所以我尝试这样做：

$(document).ready(function(){ 
    $('select[name=selectedName]').change(function() { 
     $('tr').filter(function() { 
      return $(this).find('td').filter(function() { 
       return $(this).text().indexOf('$('select[name=select2]').val()') == -1; 
      }).length; 
     }).$(this).parent("tr:first").hide(); 
    }); 
}); 

，但没有工作，以及...这是我如何建立我的下拉列表：

$query = "SELECT user_name FROM users"; 
$result = mysql_query($query); ?> 
<select name="selectedName" id="userSelected"> 
    <option value="" disabled selected>user name</option> 
    <?php while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { ?> 
     <option value="<?php echo $line['user_name'];?>"> 
      <?php echo $line['user_name'];?> 
     </option> 
    <?php } ?> 
</select> 

任何帮助导致解决方案？谢谢

Answer 1

知道你还没有发布足够的信息给我们来帮助你完成，我至少可以在你的代码中指出一个错误。

您应该使用F12工具，以便发现这些错误。

根据您使用的浏览器，F12工具的控制台区域将显示ReferenceError: not is not defined。

点击行号会显示错误是

$(not(this)).parent("tr:first").hide();

（除非有其他错误在此之前在这种情况下，你需要修复第一）

所以not(this)无效语法。如果你不明白为什么，请发布一个更具体的问题，我们很乐意解释这些事情的含义。

Answer 2

您是否想要过滤含有文本在给定值的行，或行其整个HTML等于在给定值的文本？这是一个重要的区别，我假设你的意思是前者，因为这是你使用的措辞，但你的代码似乎做后者。

另外请记住，$(element).html()会给你一个从$(element).text()非常不同的字符串。在以下示例中，$('.bunny').text()将包含字符串“我是兔子”，但$('.bunny').html()不会。

<div class="bunny"> 
    Hi! I am a <strong>bunny</strong>. 
</div> 

如果你正在寻找通过文本内容过滤行，我会做一些这样的：我在每一个步骤中创建大量的变量

var search_term = $(this).val(); 

var matching_rows $('tr').filter(function(){ 
    var this_row_text = $(this).text(); 
    // Standardize whitespace (in case it's useful) 
    this_row_text = this_row_text.replace(/\s+/g, " "); 

    if (this_row_text.indexOf(search_term) > -1) { 
    return true; 
    } else { 
    return false; 
    } 
}); 

matching_rows.addClass("highlighted"); // or whatever 

注意;即使var仅使用一次，这也会导致更多的描述性和可读性的代码，这对于您以后进行故障排除和维护而言并不是那么痛苦。当我的JS代码行为不当时，我所做的第一件事就是进入并打破这样的变量。由此产生的JS大约是线的两倍，但我通过完成这个过程几乎总能找到并解决多个问题。 Jquery使得编写过密的代码变得很容易。 ;-)

在更一般的说明中，我想我在上面的代码片段中发现了大量的Jquery错误。我们可以单独为你指出这些，但这不是这里的目的;专注于将问题分解为越来越小的问题，以便您一次处理一个错误，而不是被其中几个人一次性处理。例如，如果您尝试对过滤行为进行故障排除，请打开Chrome的开发工具，并开始在JS控制台中使用过滤器进行播放。然后，一旦你对此充满信心，你可以将&粘贴回IDE，并确信“我知道这3条线路按预期工作”。

Answer 3

首先设置一些常量中不会改变页面的位（这将有助于加快你的代码）：

var select = $('#userSelected'); 
var trs = $('tr'); 

然后在你的变化功能，你只需要测试对文本的价值和拨动每一行的行是否被隐藏或不：

$(document).ready(function(){ 
    var select = $('#userSelected'); 
    var trs = $('tr'); 
    select.change(function() { 
     var value = select.val(); 
     trs.each(function(){ 
      var isShown = $('td:first', this).text() == value; 
      $(this).toggle(isShown); 
     }); 
    }); 
}); 

JSFIDDLE