如何在不使用任何 mysql 查询的情况下在 HTML 表中进行搜索，仅使用普通的 javascript 或 jquery 来进行搜索？答案

【问题标题】：How can I search in a HTML table without using any mysql queries, just a plain javascript or jquery to be specific?如何在不使用任何 mysql 查询的情况下在 HTML 表中进行搜索，仅使用普通的 javascript 或 jquery 来进行搜索？
【发布时间】：2015-10-06 16:37:39
【问题描述】：

关于这个问题，我在 Stack Overflow 上看到了一些解决方案，该解决方案将我重定向到这里：http://jsfiddle.net/9hGym/ 在 JS fiddle 上，代码可以工作，但是当我在编辑器上实现它并运行它时，它不起作用。顺便说一句，作为一个库我使用了谷歌CDN，我不知道它是否正确，所以帮助我。顺便说一下，这是我的代码..

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script language = "javascript">


    // Write on keyup event of keyword input element
    $("#search").keyup(function(){
        _this = this;
        // Show only matching TR, hide rest of them
        $.each($("#table tbody").find("tr"), function() {
            console.log($(this).text());
            if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
               $(this).hide();
            else
                 $(this).show();                
        });
    }); 

</script>
</head>
<body>
      <div class="row large-centered">
        <h1>World of Warcraft characters. <small>Mine and my brothers, we share.</small></h1>
    </div>
    <div class="row large-centered">
        <input type="text" id="search" placeholder="Type to search..." />
        <table id="table" width="100%">
            <thead>
                <tr>
                    <th>Character name</th>
                    <th>Class</th>
                    <th>Realm</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td>Benjamin.</td>
                <td>Rogue.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Cachoito.</td>
                <td>Hunter.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Contemplario.</td>
                <td>Paladin.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Elthron.</td>
                <td>Death Knight.</td>
                <td>Agamaggan ES.</td>
            </tr>
            <tr>
                <td>Giloh.</td>
                <td>Priest.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Kitialamok.</td>
                <td>Warrior.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Magustroll.</td>
                <td>Mage.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Marselus.</td>
                <td>Mage.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Mistrala.</td>
                <td>Warrior.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Suavemente.</td>
                <td>Warrior.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Tittus.</td>
                <td>Monk.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Yarlokk.</td>
                <td>Warlock.</td>
                <td>Uldum ES.</td>
            </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

【问题讨论】：

How to filter html table?的可能重复
用$(document).ready() 回调试试。在使用 JavaScript 之前需要加载 DOM。
它现在可以工作了，谢谢你的回答:)

标签： javascript jquery html search html-table

【解决方案1】：

您应该将 javascript 代码放在 $(document).ready 中，这将确保函数在 DOM 准备好后运行。

<script language = "javascript">

$( document ).ready(function(){
    // Write on keyup event of keyword input element
    $("#search").keyup(function(){
        _this = this;
        // Show only matching TR, hide rest of them
        $.each($("#table tbody").find("tr"), function() {
            console.log($(this).text());
            if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
               $(this).hide();
            else
                 $(this).show();                
        });
    }); 
});

</script>

【讨论】：

【解决方案2】：

您可以尝试使用 getElementsByTagName，并捕获所有“TD”元素，如下所示：

<html>
<body>
<script>
    function _Change() 
    { 
        var TD = document.getElementsByTagName('td');
        i=0;
        do {
            if ( TD[i].innerHTML.trim().localeCompare("three") == 0 ) TD[i].innerHTML = "3";
            i++; 
        } while(i<TD.length)
    }
</script>
<table border=1>
<tr><td> one </td> <td> two </td></tr>
<tr><td> three </td> <td> four </td></tr>
<tr><td> five </td> <td> six </td></tr>
</table>
<button onclick="_Change()"> change </button>
</body>
</html>

【讨论】：