在搜索表行时，它不会让嵌套的表头行保持使用Javascript函数

时间：2017-03-01 13:20:04

标签： javascript jquery html css

我正把头靠在墙上。我有一个带有嵌套表的表，在表格上方我有一个搜索字段。用户应在输入字段中键入一个数字，搜索应从输入编号的行开始缩小范围。

到目前为止，我可以在嵌套表中缩小范围，但目标是让父表的标题行保持不变。我认为它只是一小部分缺失，但也许额外的一双眼睛可以帮助我在这里。

理想的解决方案是让父表中的“时间”行保持不变。

以下是我的代码：

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

1 个答案:

答案 0 :(得分：2)

好的，我不是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(){

然后我在已经存在的内容中添加了一点扩展：包含过滤器，因为它不适用于区分大小写的文本

$.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”。如果那不是您想要的，请告诉我，我们可以更改它。

相关问题
最新问题