javascript - 查找表行时，不让嵌套的表头行停留在Javascript函数中

标签 javascript jquery html css

我正在用头撞墙。我有一个带有嵌套表的表，在表上方我有一个搜索字段。用户应在输入字段中键入一个数字，搜索应开始缩小输入数字的行。

到目前为止一切顺利，我可以在嵌套表中缩小范围，但目标是保留父表的标题行。我认为它只是丢失了一小块，但也许多一双眼睛可以帮助我解决这个问题。

理想的解决方案是让父表中的“times”行也保留。

下面是我的代码片段:

function reservationManagerListTableSearchFunction() {
  // Declare variables
  var input, filter, table, tr, td, i;
  input = document.getElementById("reservationManagerListTableNumberInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("table2");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    if (!tr[i].classList.contains('header')) {
      td = tr[i].getElementsByTagName("td"),
        match = false;
      for (j = 0; j < td.length; j++) {
        if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
          match = true;
          break;
        }
      }
      if (!match) {
        tr[i].style.display = "none";
      } else {
        tr[i].style.display = "";
      }
    }
  }
}
/* Below is the Schedule Part for the Reservation Manager */

#reservationManagerScrolltbody {
  height: 10em;
  /* Just for the demo          */
  overflow-y: auto;
  /* Trigger vertical scroll    */
  overflow-x: auto;
  /* Trigger horizontal scroll    */
  width: 100px;
}

#table2 td+td {
  border-left: 2px solid #F5F5F5;
  font-size: 1vw;
}

#table2 th+th {
  border-left: 2px solid #F5F5F5;
  font-size: 1vw;
}

#waiterStationTableinfo td+td {
  border-left: 1px solid #F5F5F5;
  font-size: 0.5vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- right container -->
<div id="right">
  <h6 style="font-size:1vw; ">Search by any table</h6>
  <input style="margin-top:0.5em margin-bottom: 0.5em;" class="form-control" type="text" id="reservationManagerListTableNumberInput" onkeyup="reservationManagerListTableSearchFunction()" placeholder="Search for any table.. ">
  <table class="table table-rsponsive table-sm table-hover" id="table2">
    <thead class="header">
      <tr>
        <!-- if checkbox is checked, clone reservation subjects to the whole table row  -->
        <th class="redips-mark blank">
          <input id="week" type="checkbox" title="Preassign Table by drag and drop Reservation in each slot" checked/>
          <input id="report" type="checkbox" title="Show Assignment report" />

        </th>
        <th class="redips-mark dark">11:00</th>
        <th class="redips-mark dark">11:30</th>
        <th class="redips-mark dark">12:00</th>
        <th class="redips-mark dark">12:30</th>
        <th class="redips-mark dark">13:00</th>
        <th class="redips-mark dark">13:30</th>
        <th class="redips-mark dark">14:00</th>
        <th class="redips-mark dark">14:30</th>
        <th class="redips-mark dark">17:00</th>
        <th class="redips-mark dark">17:30</th>
        <th class="redips-mark dark">18:00</th>
        <th class="redips-mark dark">18:30</th>
        <th class="redips-mark dark">19:00</th>
        <th class="redips-mark dark">19:30</th>
        <th class="redips-mark dark">20:00</th>
        <th class="redips-mark dark">20:30</th>
        <th class="redips-mark dark">21:00</th>
        <th class="redips-mark dark">21:30</th>
        <th class="redips-mark dark">22:00</th>
      </tr>
    </thead>
    <tbody class="reservationManagerScrolltbody">

      <tr>
        <td class="reservationManagerTableType">
          <table class="waiterStationTableinfo">
            <label>Waiterstation 1</label>
            <thead class="header">
              <tr>
                <th>TN</th>
                <th>TT</th>
                <th>RA</th>
                <th>GA</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>116</td>
                <td>2 TOP</td>
                <td>2</td>
                <td>6</td>
              </tr>
              <tr>
                <td>214</td>
                <td>2 TOP</td>
                <td>3</td>
                <td>5</td>
              </tr>
              <tr>
                <td>154</td>
                <td>2 TOP</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>323</td>
                <td>2 TOP</td>
                <td>0</td>
                <td>0</td>
              </tr>
            </tbody>
          </table>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td class="reservationManagerTableType">4 TOP</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td class="reservationManagerTableType">6 TOP</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td class="reservationManagerTableType">8 TOP</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td class="reservationManagerTableType">10 TOP</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td class="reservationManagerTableType">12 TOP</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td class="reservationManagerTableType">14 TOP</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td class="reservationManagerTableType">16 TOP</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td class="reservationManagerTableType">Dummy</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>
<!-- right container -->

最佳答案

好吧，我不能 100% 确定这就是您想要的，请告诉我，我们可以继续努力。

https://jsfiddle.net/g9u98Lf5/2/

所以基本上我添加了这个:

$(function(){
    $.expr[':'].containsIgnoreCase = function (n, i, m) {
        return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

    $('#reservationManagerListTableNumberInput').keyup(function(e) {
        clearTimeout($.data(this, 'timer'));
        if(e.keyCode == 13)
            search(true);
        else
            $(this).data('timer', setTimeout(search, 100));
    });
});

function search(force) {
    if(this.value == '') {
        $('#table2 tbody tr').show();
        return;
    }
    var word = $('#reservationManagerListTableNumberInput')[0].value;
    var word_filter = $('#table2 tbody tr');
    if($.trim(word) != '')
        word_filter = word_filter.filter(':containsIgnoreCase('+word+')');
    $('#table2 tbody tr').hide();
    word_filter.show();
}

那有什么作用呢？好吧，我添加的第一点是确保在我做任何事情之前页面完成加载

$(function(){

然后我对现有的 :contains 过滤器添加了一点扩展，因为它不适用于区分大小写的文本

$.expr[':'].containsIgnoreCase = function (n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

之后的部分捕获输入框上的 keyup(你真的不想使用它会被弃用的 onkey 属性)

$('#reservationManagerListTableNumberInput').keyup(function(e) {
    clearTimeout($.data(this, 'timer'));
    if(e.keyCode == 13)
        search(true);
    else
        $(this).data('timer', setTimeout(search, 100));
});

你关心的部分在这里:

search();

其余的东西只是为了确保它不会在每次按键时都运行，而是仅在有 100 毫秒的等待时间时运行。它使您的代码更快，感觉更好。

现在搜索功能......所以你已经做了正确的事情，主要区别在于我只使用 tbody 标签搜索而不是搜索整个表:

$('#table2 tbody tr')

这将选择 tbody 标签内 #table2 内的所有内容，即 tr

然后我匹配结果，隐藏所有内容，然后只显示匹配的内容。

编辑:

根据您的评论，它现在应该只匹配整个字符串。它仍然会匹配任何包含搜索内容的内容，例如，如果您搜索“4 TOP”，那么它会同时显示“4 TOP”和“14 TOP”。如果这不是您想要的，请告诉我，我们可以更改它。

关于javascript - 查找表行时，不让嵌套的表头行停留在Javascript函数中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42532900/

上一篇：javascript - Vue JS 组件间数据可用性

下一篇：javascript - jQuery 可拖动 - 只记住第一次拖动

相关文章：

javascript - 不向从 javascript Date 创建的对象添加分钟的时刻

javascript - 无法通过 jQuery 解析 xml 属性。

javascript - 将多个Javascript文件添加到Wordpress的functions.php中

javascript - Jquery 循环 JSON 每个对象返回错误

html - 在表格右侧显示内容

javascript - 遍历同一组件angular2的多个@ViewChild实例

javascript - Redactor - 固定工具栏在移动设备上不起作用

javascript - 如何在更新面板中控制或停止部分回发

python - 未显示的帖子列表 - django

html - 为什么让多个 HTML 元素具有相同的 id 属性是一件坏事？

©2024 IT工具网  联系我们