Html表格元素不隐藏答案

【问题标题】：Html table elements not hidingHtml表格元素不隐藏
【发布时间】：2017-06-09 23:07:50
【问题描述】：

我有一个 HTML 表格：

<table>
    <tr>
        <td>row1_el1</rd>
        <div class="rowA">
            <td>row1_el2</td>
            <td>row1_el3</td>
        </div>
    </tr>
    <tr>
        <div id="rowB">
            <td>row2_el1</td>
        </div>
        <div class="rowA">
            <td>row2_el2</td>
            <td>row2_el3</td>
        </div>
    </tr>
    <tr id="rowC">
        <td>row3_el1</td>
        <td>row3_el2</td>
    </tr>
</table>

<button type="button" id="hideButton">hide</button>

当我点击按钮时，我想从表格中隐藏一些元素：

$(function() {
    var hideThem = function() {
        $("#rowB").hide();
        $("#rowC").hide();
        $(".rowA").hide();
    };

    $("#hideButton").on('click', function() {
        hideThem();
    });
});

但是，它不起作用：rowA 和 rowB 仍然可见。

我怎样才能有效地隐藏它们？

【问题讨论】：

'block's 是错误的。将其更改为'click'
'block's 应该是"click"
是的，自动更正...
为什么在 tr 行中使用 div
你的问题解决了吗

标签： jquery html html-table

【解决方案1】：

尝试使用 jQuery 的 .click() 函数而不是 .on()。

Here is the documentation了解如何简单实现该功能！

【讨论】：

【解决方案2】：

您可能需要下面的简单点击功能。

$(document).ready(function(){
    $("#hideButton").click(function(){
        $("#rowB").hide();
        $("#rowC").hide();
        $(".rowA").hide();
    });
});

【讨论】：

【解决方案3】：

你可以用这个

$(document).ready(function(){
    $("#hideButton").click(function(){
        $("#rowB").hide();
        $("#rowC").hide();
        $("#rowA").hide();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table>
    <tr id="rowA">
        <td>row1_el1</rd>
        <td>row1_el2</td>
        <td>row1_el3</td>
    </tr>
    <tr id="rowB">
        <td>row2_el1</td>
        <td>row2_el2</td>
        <td>row2_el3</td>
    </tr>
    <tr id="rowC">
        <td>row3_el1</td>
        <td>row3_el2</td>
    </tr>
</table>

<button type="button" id="hideButton">hide</button>

【讨论】：