Question

Checkbox的{{1}}我希望Show / Hide HTML表格。我尝试过如下

HTML

 <tr id="trfeedback" runat="server" visible="false">
            <td style="width: 5%">
            </td>
            <td style="width: 90%">
                <asp:CheckBox ID="chkFeedback" runat="server" Text="Send Feedback" Width="6%" onclick="toggleTable();" />
            </td>
            <td style="width: 5%">
            </td>
        </tr>
        <table id="trchkOptions" runat="server">
            <tr>
                <td style="width: 5%">
                </td>
                <td>
                    <asp:CheckBox ID="chkOption1" runat="server" Width="5%" />
                    Option 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To&nbsp;
                    RA 1,&nbsp; RA 2
                </td>
                <td style="width: 5%">
                </td>
            </tr>
            <tr>
                <td style="width: 5%">
                </td>
                <td>
                    <asp:CheckBox ID="chkOption2" runat="server" Width="5%" />
                    Option 2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To&nbsp;
                    HMS, VMS.
                </td>
                <td style="width: 5%">
                </td>
            </tr>
            <tr>
                <td style="width: 5%">
                </td>
                <td>
                    <asp:CheckBox ID="chkOption3" runat="server" Width="5%" />
                    Option 3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To,
                    RA 1,&nbsp; RA 2.
                </td>
                <td style="width: 5%">
                </td>
            </tr>
        </table>

JS

 function toggleTable() {
        var lTable = document.getElementById("chkFeedback");
        lTable.style.display = (lTable.style.display == "table") ? "none" : "table";
    }

但它不起作用。我不知道自己哪里出错了。 HTML的视图源位于小提琴

中

VIEW SOURCE

请帮助

Answer 1

下面是您的代码的工作版本，它使用复选框checked属性来隐藏表格。

以下是我做的一些小改动：

<!-- setting the initial state to checked and passing this to toggle function-->
<input id="chkFeedback" type="checkbox" name="chkFeedback" onclick="toggleTable(this);" />

然后是javascript函数

＆＃13;

function toggleTable(cb) {
    var lTable = document.getElementById("trchkOptions");  
    lTable.style.display = cb.checked ? "table": "none";
}

＆＃13;

<tr id="trfeedback">
	<td style="width: 5%">
                </td>
	<td style="width: 90%">
                    <span style="display:inline-block;width:6%;"><input id="chkFeedback" type="checkbox" name="chkFeedback" onclick="toggleTable(this);" /><label for="chkFeedback">Send Feedback</label></span>
                </td>
	<td style="width: 5%">
                </td>
</tr>
 
            <table id="trchkOptions" style='display:none'>
	<tr>
		<td style="width: 5%">
                    </td>
		<td>
                        <span style="display:inline-block;width:5%;"><input id="chkOption1" type="checkbox" name="chkOption1" /></span>
                        Option 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To&nbsp;
                        RA 1,&nbsp; RA 2
                    </td>
		<td style="width: 5%">
                    </td>
	</tr>
	<tr>
		<td style="width: 5%">
                    </td>
		<td>
                        <span style="display:inline-block;width:5%;"><input id="chkOption2" type="checkbox" name="chkOption2" /></span>
                        Option 2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To&nbsp;
                        HMS, VMS.
                    </td>
		<td style="width: 5%">
                    </td>
	</tr>
	<tr>
		<td style="width: 5%">
                    </td>
		<td>
                        <span style="display:inline-block;width:5%;"><input id="chkOption3" type="checkbox" name="chkOption3" /></span>
                        Option 3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;To,
                        RA 1,&nbsp; RA 2.
                    </td>
		<td style="width: 5%">
                    </td>
	</tr>
</table>
 
        </table>

＆＃13;

Answer 2

更新了fiddle。基本上你必须调用window.getComputedValue来获得计算出的css值。

只有在代码中的style属性中定义了显示时，

Element.style.display才有效。

IE8解决方法：

((window.getComputedStyle ? window.getComputedStyle(lTable) : lTable.currentStyle).display === "table") ? "none" : "table";

但是我无法测试它，因为我没有IE8。

显示隐藏的html表在javascript（IE8）中不起作用

2 个答案: