javascript - 在HTML页面中按列过滤和搜索

我正在准备一个仪表板，并准备了一个带有表的静态HTML页面
现在，我想为每列添加filter + search。

我从http://wsabstract.com/script/script2/TableFilter_EN.zip获得了一个JS文件，并且按照http://wsabstract.com/script/script2/tablefilter.shtml的建议，我在下面的HTML文件中添加了该文件，但似乎无法正常工作
我错过了什么？我可以使用快速的Java脚本吗？

<html>
<head>
<style>
table {
    font-family: arial;
    border-collapse: collapse;
    width: 100%;
}
td, th {
    border: 2px solid #dddddd;
    text-align: left;
    padding: 8px;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript" src="C:\Docs\Personal\Study\Scripts\TableFilter_EN\tablefilter.js">
setFilterGrid("myTable");
</script>
<table id='myTable'>
<caption>Lab Dashboard</caption>
<tr style="background-color:DodgerBlue;">
<th>IP</th><th>Ping</th><th>SSHConnectivity</th><th>SSHLogin</th><th>Device Type</th><th>Version</th>
</tr>
<tr>
<td>10.22.156.1</td><td>OK</td><td>OK</td><td>NOK</td><td>Could not find</td><td>ArubaOS (MODEL: ArubaS2500-48P), Version 7.4.1.6 (56990)</td></tr></table>
</body>
</html>

最佳答案

您的代码是错误的，请尝试使用下面的代码。

<html>
<head>
    <style>
        table {
            font-family: arial;
            border-collapse: collapse;
            width: 100%;
        }
        td, th {
            border: 2px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
    </style>
</head>
<body>

<table id="mytable">
    <tbody>
    <tr>
    <tr style="background-color:DodgerBlue;">
        <td>IP</td>
        <td>Ping</td>
        <td>SSHConnectivity</td>
        <td>SSHLogin</td>
        <td>Device Type</td>
        <td>Version</td>
    </tr>


    <tr>
        <td>10.22.156.1</td>
        <td>OK</td>
        <td>OK</td>
        <td>NOK</td>
        <td>Could not find</td>
        <td>ArubaOS (MODEL: ArubaS2500-48P), Version 7.4.1.6 (56990)</td></tr>
    </tr>

    <tr>
        <td><strong>Sydney</strong></td>
        <td>Brisbane</td>
        <td>982</td>
        <td>1.5</td>

        <td>17</td>
        <td>16</td>
    </tr>

    </tbody></table>

<script src="C:\Docs\Personal\Study\Scripts\TableFilter_EN\tablefilter.js"></script>
<script language="javascript" type="text/javascript">
    setFilterGrid("mytable");
</script>
</body>
</html>