如何在不使用任何mysql查询，仅使用简单的javascript或jquery的情况下在HTML表中进行搜索？

Question

关于这个问题，我在Stack Overflow上看到了一些解决方案，该解决方案将我重定向到这里： http : //jsfiddle.net/9hGym/在JS小提琴上，代码可以工作，但是当我在编辑器上实现并运行它时，不工作。 顺便说一句，作为一个图书馆，我使用Google 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>

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

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

如何在不使用任何mysql查询，仅使用简单的javascript或jquery的情况下在HTML表中进行搜索？

问题描述

2 个解决方案

解决方案1
1

解决方案2
1

如何在不使用任何mysql查询，仅使用简单的javascript或jquery的情况下在HTML表中进行搜索？

问题描述

2 个解决方案

解决方案1 1

解决方案2 1

解决方案1
1

解决方案2
1