如何在表中隐藏所有包含单词HELLO的行。如果世界不等于javascript中的世界_Javascript_Html

如何在表中隐藏所有包含单词HELLO的行。如果世界不等于javascript中的世界

javascript html

如何在表中隐藏所有包含单词HELLO的行。如果世界不等于javascript中的世界,javascript,html,Javascript,Html,我有这样一个小问题，我试图在Javascript中找到表中所有TD中不包含单词WORLD的内容，然后单击“ONLY WORLD”按钮 $（文档）.ready（函数（）{ 让dataTableText=document.getElementById（“数据表”）.innerText；让btnOW=document.getElementById（“仅btn世界”）；如果（dataTableText==='Hello'）{ $（'table tbody'）.find（'td'）.style.di

我有这样一个小问题，我试图在Javascript中找到表中所有TD中不包含单词WORLD的内容，然后单击“ONLY WORLD”按钮

$（文档）.ready（函数（）{
让dataTableText=document.getElementById（“数据表”）.innerText；
让btnOW=document.getElementById（“仅btn世界”）；
如果（dataTableText==='Hello'）{
$（'table tbody'）.find（'td'）.style.display=“无”；
}
});

唯一的世界
B
你好
世界
你好
你好
世界
世界
世界
世界
你好
你好
世界
你好
唯一的世界
数据表文本的值永远不会是“Hello”
。它将是完整表的文本值。因此，您的if
-条件永远不会为真
所以这一行：
$('table tbody').find('td').style.display = "none";

永远不会被执行。如果是，它将隐藏表中的所有
，而不考虑它们的内容。
根据您的代码，看起来您使用的是jquery，而不仅仅是普通的javascript
我已将您的代码片段更新为：

在单击按钮的基础上运行函数，而不是在文档准备就绪后立即运行
使用JQuery：contains（）
选择器查找所有带有单词“Hello”的td
设置一个带有css可见性：隐藏的类，因为使用display:none会使TD完全消失并弄乱您的表格布局。如果希望单元格完全消失，则仍应执行display:none



$（文档）.ready（函数（）{
设tdsWithHello=$（“表#数据表td:contains（'Hello'））；
$（“#仅btn世界”）。单击（函数（）{
tdsWithHello.each（函数（）{
$（this.addClass（“hide”）；
});
});
});
.hide{
可见性：隐藏；
}

唯一的世界
B
你好
世界
你好
你好
世界
世界
世界
世界
你好
你好
世界
你好
唯一的世界
您需要找到要隐藏的正确td，这里我更新了您的代码sippet
   <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

    <div class="data-table">
        <table class="table table-bordered text-center table-dark" id="data-table">
            <tr>
                <td>Only World</td>
                <td>b</td>
            </tr>
            <tr>
                <td>Hello</td>
                <td>World</td>
            </tr>
            <tr>
                <td>Hello</td>
                <td>Hello</td>
            </tr>
            <tr>
                <td>World</td>
                <td>World</td>
            </tr>
            <tr>
                <td>World</td>
                <td>World</td>
            </tr>
            <tr>
                <td>Hello</td>
                <td>Hello</td>
            </tr>
            <tr>
                <td>World</td>
                <td>Hello</td>
            </tr>
        </table>
    </div>
    <div class="btn-wrap">
        <div class="d-grid gap-2 col-6 mx-auto">
            <button id="btn-only-world" class="btn btn-light" type="button">Only World</button>
            <button id="btn-all-world" class="btn btn-light" type="button">All</button>
        </div>
    </div>

</body>

<script>
    $(document).ready(function () {



        $("#btn-only-world").click(function () {
            $("td").each(function (column, td) {
                var cellText = $(this).html();
                if (cellText === "Hello")
                    $(td).css("display", "none")

            });
        });

        $("#btn-all-world").click(function () {
            $("td").each(function (column, td) {
                var cellText = $(this).html();
                $(td).removeAttr("style")

            });
        });


    });
</script>


</html>


文件
唯一的世界
B
你好
世界
你好
你好
世界
世界
世界
世界
你好
你好
世界
你好
唯一的世界
全部的
$（文档）.ready（函数（）{
$（“#仅btn世界”）。单击（函数（）{
$（“td”）。每个功能（列，td）{
var cellText=$（this.html（）；
if（cellText==“你好”）
$（td.css（“显示”、“无”）
});
});
$（“#btn全世界”）。单击（函数（）{
$（“td”）。每个功能（列，td）{
var cellText=$（this.html（）；
$（td）.removeAttr（“样式”）
});
});
});
dataTableText
返回hello world的多个字符串，因此您的if（dataTableText=='hello'）
将永远不会工作。感谢您的代码工作：）除非hello world相等，否则请不知道如何隐藏，即如果hello是hello或world，如果我正确理解您的问题。您可以根据需要更改if条件if（cellText==“Hello”）
。