时间戳

首页 > 解决方案 > 有过滤/显示部分表格的代码。想知道如何将整个表过滤为一个吗？

javascript - 有过滤/显示部分表格的代码。想知道如何将整个表过滤为一个吗？

问题描述

我已经成功地集成了几个代码片段。我的页面上有一个查询/输入，仅当输入搜索的单词/标题时，返回的显示结果不显示完整的表格，应该显示整个 title1 表格（标题、描述、日期......以及所有）并仅在表标题行/列中搜索。我想知道这是否可以简单地解决。如果您需要更多信息，请告诉我。

JS

var input, table, rows, noMatches, markInstance;

$(document).ready(function init() {
  input = document.getElementById('myInput');
  noMatches = document.getElementById('noMatches');
  table = document.getElementById('myTable');
  rows = table.querySelectorAll('tr');
  markInstance = new Mark(table);

  input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));
});



function ContactsearchFX() {
  resetContent();
  markInstance.unmark({ done: highlightMatches });
}



function resetContent() {

    $('.noMatchErrorText').remove(); 
    //Remove this line to have a log of searches

    //noMatches.textContent = '';
  rows.forEach(function(row) {
    $(row).removeClass('show'); 
  });
}



function highlightMatches() {
  markInstance.mark(input.value, {
    each: showRow,
    noMatch: onNoMatches,
  })
}



function showRow(element) {
//alert(element);
  $(element).parents('tr, td').addClass('show');
  //Parents incase of several nestings
}



function onNoMatches(text) {
  $('#myInput').after('<p class="noMatchErrorText">No records match: "' +         text + '"</p>'); 
}

CSS

.input-wrap {
  margin-bottom: 12px;
}

#myInput:invalid ~ .hints {
  display: block;
}

#noMatches:empty, #noMatches:empty + .hints {
  display: none;
}

.style1 tr {
  display: none;
}

.style1 .show {
  display: table-row;
}

mark {
  background: orange;
  font-weight: bold;
  color: black;
}

使用的脚本

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js">        </script><script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1        /mark.min.js"></script><head/>

HTML

<div class="input-wrap">
  <label>
    Search Titles: 
    <input id="myInput" type="text" required
           placeholder="Search Titles" />
  </label>
</div>

<div class="hintsWrap">
  <p id="noMatches"></p>
  <p class="hints">
    Hints: type "Title1", "Title2", "Title 3"...
  </p>
</div>



<table id="myTable" style="width: 100%" class="style1">
  <tr>
    <td>

    <br />

    <table style="width: 100%">
        <tr>
            <td>Title1</td>
        </tr>
        <tr>
            <td>
            <Description1</td>
        </tr>
        <tr>
            <td>Date1</td>
        </tr>
    </table>
    <br />

    <table style="width: 100%">
        <tr>
            <td>Title2</td>
        </tr>
        <tr>
            <td>
            <Description2</td>
        </tr>
        <tr>
            <td>Date2</td>
        </tr>
    </table>
    <br />

    <table style="width: 100%">
        <tr>
            <td>Title3</td>
        </tr>
        <tr>
            <td>
            <Description3</td>
        </tr>
        <tr>
            <td>Date3</td>
        </tr>
    </table>
    </td>
</tr>
</table>

标签： javascripthtmlcss

解决方案

所以我只有一点点时间，所以我只能帮助你解决部分问题。我知道对部分代码进行的简单更改可能会在仅输入 1 个字母时阻止突出显示。

$(document).ready(function init() {
  input = document.getElementById('myInput');
  noMatches = document.getElementById('noMatches');
  table = document.getElementById('myTable');
  rows = table.querySelectorAll('tr');
  markInstance = new Mark(table);

  ContactsearchFX = ContactsearchFX.bind(input) 
  input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));
});



function ContactsearchFX() {
    if(this.contextText.length > 1){
        resetContent();
        markInstance.unmark({ done: highlightMatches });
    }
}

推荐阅读