我如何在HTML表中搜索而不使用任何mysql查询，只是一个简单的javascript或jquery具体

How can I search in a HTML table without using any mysql queries, just a plain javascript or jquery to be specific?

本文关键字：一个 简单 jquery 具体 javascript 查询 HTML 搜索 任何 mysql      更新时间：2023-09-26

关于这个问题，我在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>

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

您可以尝试使用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>
相关文章：