Question

我试图隐藏表格中的所有行，但<td>包含与从下拉列表中选择的用户相同的文本的行除外。以为它应该很容易，但我现在很久都在努力...我试过这样的事情：

$(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()将包含字符串＆＃34;我是一个兔子＆＃34;但是$('.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错误。我们可以为你单独指出这些，但那不是那里的SO;专注于将您的问题分解成越来越小的部分，这样您就可以一次解决这些错误，而不是被其中一些错误立即解决。例如，如果您尝试对过滤行为进行问题排查，请打开Chrome的开发工具，然后开始在JS控制台中使用过滤器。一旦你对此有信心，你可以复制＆amp;粘贴回你的IDE并确信＆＃34;好的，我知道这3行正在按预期工作＆＃34;。

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

使用td包含值从下拉列表中隐藏所有行

3 个答案: