隐藏表中的所有行,除了包含来自rdropdown的数据的行

时间:2015-02-11 17:52:47

标签: jquery html

我试图隐藏包含文本的所有行,我使用jquery从下拉列表获取,但我无法让它工作。 这是功能:

$(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>

任何想法为什么它不起作用?

更新

这是我创建表格的方式:

<table class="table table-bordered table-hover" ng-controller="tableCtrl" ng-controller="Ctrl">
    <thead>
        <th>user name</th>
        <th>script name</th>
        <th>cron format</th>
    </thead>
    <tbody ng-repeat="(user_id, row) in data | filter:search">
        <tr ng-repeat="(script_id, cron_format) in row ">
            <td class="userName">{{user(user_id)}}</td>
            <td class="scriptName">{{script(script_id)}}</td>
            <td class="cronFormat"><span contenteditable="true" ng-repeat="l in letters(cron_format) track by $index">{{l}}</span><button class="save"  ng-click="saveCron(user_id,script_id,cron_format)">save</button></td>
        </tr>
    </tbody>
</table>

,结果是一个包含三列和下拉列表的表,包括所有user_name

1 个答案:

答案 0 :(得分:0)

你几乎只需改变一些事情:

  • indexOf('$('select[name=select2]').val()')无效放置撇号;
  • $('select[name=select2]').val()应为$('select[name=selectedName]').val();

  • 最后一部分.$(this).parent("tr:first").hide();无效,但逻辑正确,过滤器功能将返回不需要的行,然后您可以隐藏它们;

  • $(this).find('td')可以更改为$(this).find('td.userName'),因为我们只需要使用类&#34; userName&#34;来搜索单元格。

最终结果应如下:

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