第二个表总是隐藏!为什么?

时间:2014-07-25 13:23:35

标签: jquery html asp.net-mvc

我有这个带有收音机的桌子上的一些按钮:

<body>
<div id="container">
    <div>
        <input id="button" type="button" value="Show Type" />
        <label>
            <input type="radio" name="table" value="form" checked="checked" style="width: 10px" />
            Forms
        </label>
    </div>
    <div>
        <label>
            <input type="radio" name="table" value="entity" style="width: 10px" />
            Entity Types
        </label>
    </div>
    <div>
        <label>
            <input id="date" type="checkbox" name="date" value="date" style="width: 10px" />
            DATE
        </label>
    </div>
    <div id="forms" class="toHide">
        <table id="table_forms" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>English Name</th>
                    <th>Nickname</th>
                    <th>Created</th>
                    <th>Last Update</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div class="add_delete_toolbar" />
    </div>

    <div id="entities" class="toHide">
    <table id="table_entity" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
        </tbody>
    </table>
        <div class="add_delete_toolbar" />
    </div>
</div>

我正在使用jQuery单选按钮来隐藏/显示表格:

$("input:radio").change(function () {
            var test = $(this).val();
            if (test == 'entity') {
                $("#forms").hide();
                $("#entities").show();
                //$("#entities").attr("style", "display: block");
            }
            if (test == 'form') {
                $("#entities").hide();
                $("#forms").show();
                //$("#entities").attr("style", "display: none");
            }
        });

但是我的第二张桌子总是被隐藏起来,我不知道为什么!即使我选中/取消选中单选按钮。我试过不同的方法仍然没有什么。请帮忙!!

2 个答案:

答案 0 :(得分:1)

您的“实体”div位于“表单”div中...将其放在外面并将起作用:)

答案 1 :(得分:0)

您尚未关闭div#实体,因此div#实体位于其中。将</div>放在<div id="entities">之前,它会起作用。

演示:http://jsfiddle.net/vCzjF/