Question

好吧，标题可能听起来有点简单或常见，但我的问题并不那么容易。我正在制作一个在表格行中显示数据库的HTML页面。示例代码为：

<table>
<tr><td>ABC Hospitals</td></tr>
<tr><td>India</td><td>Contact:9999999999</td></tr>
</table>

<table>
<tr><td>XYZ Blood Bank</td></tr>
<tr><td>NewJersey</td><td>Contact:8888888888</td></tr>
</table>

<table>
<tr><td>ABC Inn</td></tr>
<tr><td>California</td><td>Contact:7777777777</td></tr>
</table>

我使用表格对数据进行分组，每个数据都包含显示数据的行。代码提供了以下输出示例，并添加了CSS效果： Image1 - 抱歉，我是新用户，StackOverflow不允许我发布图片。

我现在需要一个＆＃39;在页面中查找＆＃39;用于在HTML文档中搜索特定信息的框（例如＆＃34; ABC＆＃34;）。搜索必须仅显示包含查询字词的表格（＆＃34; ABC＆＃34;），在我们的示例中，隐藏所有其他不包含搜索字词的表格。我通过手动编辑HTML来实现示例输出，只是为了更清楚地显示我的要求。我需要JScript（或任何适当的）代码来实现结果： Image2 - 再次抱歉。

我确定这里有人能够帮助我，要么提供一些代码，要么指导我一些有用的链接。提前谢谢。

-Sriram

Answer 1

var search = document.querySelector('#search');
var database = document.querySelector('#database');

search.addEventListener('input', function (e) {
    // Every time the input changes, execute filterMatching.
    filterMatching(search.value, database);
});

function filterMatching(value, parent) {
    // Get the parent's children into an array
    var children = [].slice.call(parent.children);
    // Everything is shown by default.
    children.forEach(function removeHiddenFromAll(child) {
        child.classList.remove('hidden');
    });
    // Find those who are not matching
    children.filter(function findNonMatching(child) {
        // the toLowerCase() on both ensures the search is not case sensitive.
        return child.textContent.toLowerCase().indexOf(value.toLowerCase()) < 0;
    })
    // After we found all the non matching, hide them
    .forEach(function hideNonMatching(nonMatching) {
        nonMatching.classList.add('hidden');
    });
}

.hidden {
    display: none;
}

<input type="text" id="search" />
<div id="database">
    <table>
        <tr>
            <td>ABC Hospitals</td>
        </tr>
        <tr>
            <td>India</td>
            <td>Contact:9999999999</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>XYZ Blood Bank</td>
        </tr>
        <tr>
            <td>NewJersey</td>
            <td>Contact:8888888888</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>ABC Inn</td>
        </tr>
        <tr>
            <td>California</td>
            <td>Contact:7777777777</td>
        </tr>
    </table>
</div>

Answer 2

没关系，出于某种原因，当元素存储为＆＃39; var＆＃39;时，事情不起作用。类型。所以我稍微修改了代码如下：我创建了一个新函数：

function fn_search(){
var phrase = document.querySelector('#search').value;
filterMatching(phrase, document.querySelector('#database'));
}

并致电

<input type="text" id="search" oninput="fn_search()" />

该程序现在运行正常。

完整的代码如下：

<html>
<head>
<style>
table{
    padding: 20px;
   margin: 10px;
   background: #990030;
   color: #fff;
   font-size: 17px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed #9ff;
   border-radius: 10px;
   box-shadow: 0 0 0 4px #990030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px #aa3030;
   font-weight: normal;
table-layout: fixed;
width: 325px;
height:75px;
}
th, td {

    overflow: hidden;
    width: 100px;
}
table.hidden {
    display: none;
}
</style>
</head>
<body>
<script>

function fn_search(){
var phrase = document.querySelector('#search').value; 
filterMatching(phrase, document.querySelector('#database'));
}

function filterMatching(value, parent) {
    // Get the parent's children into an array
    var children = [].slice.call(parent.children);
    // Everything is shown by default.
    children.forEach(function removeHiddenFromAll(child) {
        child.classList.remove('hidden');
    });
    // Find those who are not matching
    children.filter(function findNonMatching(child) {
        // the toLowerCase() on both ensures the search is not case sensitive.
        return child.textContent.toLowerCase().indexOf(value.toLowerCase()) < 0;
    })
    // After we found all the non matching, hide them
    .forEach(function hideNonMatching(nonMatching) {
        nonMatching.classList.add('hidden');
    });
}
</script>
<input type="text" id="search" oninput="fn_search()" />
<div id="database">
    <table>
        <tr>
            <td>ABC Hospitals</td>
        </tr>
        <tr>
            <td>India</td>
            <td>Contact:9999999999</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>XYZ Blood Bank</td>
        </tr>
        <tr>
            <td>NewJersey</td>
            <td>Contact:8888888888</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>ABC Inn</td>
        </tr>
        <tr>
            <td>California</td>
            <td>Contact:7777777777</td>
        </tr>
    </table>
</div>
</body>
</html>

HTML-在页面中查找并仅显示相关部分

2 个答案: