Question

直到现在我总是使用相同类型的方法动态地对表进行排序：

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();
            }
    });

}

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

如果您希望同时搜索多个参数

，该怎么办？

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

所以我的问题是＆＃34;最好的实践＆＃34;甚至你如何处理用户在表中搜索的几个参数的问题？

我的表

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

Answer 1

对于多个输入，level是一个项目数组，然后遍历每个项目并检查table_level >= level[i]这将检查单个level[i]是否低于或等于{ {1}}然后显示您的元素：

table_level

Answer 2

你有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>

通过下拉列表搜索JavaScript表

2 个答案:

PHP

的JavaScript

CSS

实施例