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

Question

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

Answer 1

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>

Answer 2

Updated the fiddle. Basically you must call window.getComputedValue to get the computed css value.

Element.style.display works only when the display is defined in the style attribute in the code.

IE8 workaround:

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

However I can't test it, as I don't have IE8.