JavaScript 表按下拉列表搜索

JavaScript table search by dropdown

本文关键字：搜索 下拉列表 JavaScript      更新时间：2023-09-26

到目前为止，我一直使用相同的方法来动态地对表进行排序：

function sortTableByLevel(level)
{
    $('.data_table_row').each(function()
    {
            var table_level = parseInt($(this).find('.avg_level').text());
            if(table_level >= level)
            {
                $(this).show();
            }
            else
            {
                $(this).hide();
            }
    });
}

但是最近我遇到了以下问题：

如果您希望同时搜索多个参数，该怎么办

那么上面的函数将不起作用，因为如果您有类似的函数，它只会按最后一个选择的函数进行排序。

所以我的问题是什么是"最佳实践"，甚至如何处理用户在表中搜索多个参数的问题？

我的桌子

<table class="table table-striped b-t b-light" id="data_table">
<thead>
<tr>
    <th>Titel</th>
    <th>Kompetence</th>
    <th>Gns niveau</th>
    <th>Gap</th>
</tr>
</thead>
<tbody id="data_body">
<?php if (isset($vars['table_data'])): ?>
    <?php foreach ($vars['table_data'] as $data): ?>
        <?php foreach($data['attributes'] as $attribute):?>
            <tr class="data_table_row">
                <td class="title_name" style="cursor: pointer;"><?php echo utf8_encode($data['name']); ?></td>
                <td class="attribute"
                    id="attribute_id_<?php echo $attribute['attribute_id']; ?>"><?php echo $attribute['name'] ?></td>
                <td class="avg_level"><?php echo $attribute['avg'] ?></td>
                <td class="gap_level"><span class="<?php if($attribute['gap'] < 0){echo 'text-danger';}else{echo 'text-success';}?>"><?php echo $attribute['gap'] ?><span></td>
            </tr>
        <?php endforeach;?>
    <?php endforeach; ?>
<?php endif; ?>
</tbody>

我的输入

<div class="row wrapper">
<div class="col-sm-6 m-b-xs">
    <select class="input-sm form-control input-s-sm inline pull-right" id="select_attribute">
        <option value="0">Vælg kompetence</option>
        <?php if (isset($vars['attribute_list'])): ?>
            <?php foreach ($vars['attribute_list'] as $attribute): ?>
                <option
                    value="<?php echo $attribute['name']; ?>"><?php echo $attribute['name']; ?></option>
            <?php endforeach; ?>
        <?php endif; ?>
    </select>
</div>
<div class="col-sm-3">
    <select class="input-sm form-control input-s-sm inline v-middle pull-right" id="select_level">
        <option value="0">Vælg niveau</option>
        <option value="1">Niveau 1</option>
        <option value="2">Niveau 2</option>
        <option value="3">Niveau 3</option>
        <option value="4">Niveau 4</option>
        <option value="5">Niveau 5</option>
        <option value="6">Niveau 6</option>
        <option value="7">Niveau 7</option>
        <option value="8">Niveau 8</option>
        <option value="9">Niveau 9</option>
        <option value="10">Niveau 10</option>
    </select>
</div>
<div class="col-sm-3">
    <button class="btn btn-default btn-sm pull-right" onclick="showAll()"><i class="fa fa-refresh"></i>
    </button>
</div>

对于多个输入，level必须是项目数组，然后循环遍历每个项目并检查table_level >= level[i] 这将检查单个level[i]是否小于或等于table_level则显示您的元素：

$('.data_table_row').each(function()
{
        var table_level = parseInt($(this).find('.avg_level').text());
        var show = false;
        for(int i = 0; i < level.length; ++i) 
            if( table_level >= level[i] ) 
                show = true;
        if(show) 
            $(this).show();
        else 
            $(this).hide();
});

你有PHP，JavaScript和jQuery。我会这样处理它：

.PHP

构造标记并向标记添加适当的数据，不要依赖不可查询的文本内容：

<?php foreach($data['attributes'] as $attribute):?>
<tr class="data_table_row" data-average="<?=$attribute['avg']?>">
  <!-- ... -->
  <td class="avg_level numeric"><?=$attribute['avg']?></td>
  <!-- ... -->
</tr>
<?php endforeach;?>

JavaScript

利用jQuery查询语言的强大功能，并让它切换一个类。 在 CSS 中处理显示/隐藏

function filterRows(levels) {
  $('.avg-level').each(function(el) {
    var avg   = $(el).data('average');
    var shown = levels.some(function(level) {
      return (avg >= level);
    });
    $(el).toggleClass('hidden', !shown);
  });
}

.CSS

由于所有具有类 hidden 的元素都应该隐藏：

.hidden {
  display: none;
}

例：

function filterAverage(levels) {
  $('.data_table_row').each(function(index, el) {
    var average = $(el).data('average');
    var shown   = levels.some(function(level) {
      return (average >= level);
    });
    $(el).toggleClass('hidden', !shown);
  });
}
$(function() {
  $('#levelChooser').on('keyup', function() {
    var levels = $(this).val()
      .trim()
      .split(' ')
      .map(function(level) {
        return parseInt(level, 10);
      })
      .filter(function(level) {
        return !isNaN(level);
      });
    filterAverage(levels.length === 0 ? [0] : levels);
  });
});
.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="levelChooser">Level:</label>
<input type="text" id="levelChooser">
<table>
    <tbody>
      <tr class="data_table_row" data-average="1">
        <td class="avg_level">1</td>
      </tr>
      <tr class="data_table_row" data-average="2">
        <td class="avg_level">2</td>
      </tr>
      <tr class="data_table_row" data-average="3">
        <td class="avg_level">3</td>
      </tr>
      <tr class="data_table_row" data-average="4">
        <td class="avg_level">4</td>
      </tr>
      <tr class="data_table_row" data-average="5">
        <td class="avg_level">5</td>
      </tr>
      <tr class="data_table_row" data-average="6">
        <td class="avg_level">6</td>
      </tr>
    </tbody>
  </table>

相关文章：