coder coder - 7 months ago 23
HTML Question

Show hide of html table is not working in javascript (IE8)

OnClick
of
Checkbox
I want to
Show
/
Hide
the HTML table. I tried like below

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";
}


but it is not working. I don't know where I am going wrong. The view source of the HTML is below in the fiddle

VIEW SOURCE

kindly help

AKS AKS
Answer

Below is a working version of your code which used checkboxes checked property to show hide the table.

Here are some minor changes that I made:

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

And, then the javascript function

function toggleTable(cb) {
    var lTable = document.getElementById("trchkOptions");  
    lTable.style.display = cb.checked ? "table": "none";
}
<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>