Question

我有一个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仍然可见。

如何有效隐藏它们？

Answer 1

尝试使用jQuery的.click（）函数而不是.on（）。

Here is the documentation关于如何简单地实现该功能！

Answer 2

您可能需要一个简单的点击功能。

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

Answer 3

你可以用这个

＆＃13;

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

＆＃13;

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

＆＃13;

Html表元素没有隐藏

3 个答案: