如何在不使用任何mysql查询的情况下搜索HTML表，只需要一个简单的javascript或jquery来具体？

About this problem, I saw a some solution here at Stack Overflow and the solution redirects me here: http://jsfiddle.net/9hGym/ On JS fiddle, the code works but when I implement it on my editor and run it, it's not working. By the way, as a library I used Google CDN, I don't know if it is proper way, so help me. Here's my code by the way..

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

2 个解决方案

#1

You should place the javascript code within a $(document).ready, this will ensure the function is run after the DOM is ready.

您应该将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

You can try to use getElementsByTagName, and catch all "TD" elements, like this:

您可以尝试使用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>

#1