Within an html form, there is a table that can be hidden or displayed based on the selection of a radio button. However, it seems that when the table is hidden and then shown again, one of the style settings is lost. It is desired to maintain the same layout when the table is visible.
HTML code for the table:
<table id="tblAutomated">
<tr>
<td>Are the deposits automated?</td>
<td id="tdAutomated" style="text-align:right"><input type="radio" name="rbAutomated" value="yes">Yes <input type="radio" name="rbAutomated" value="No">No</td>
</tr>
</table>
Javascript code for the radio button (relevant section only):
document.getElementById('tblAutomated').style.display='block';
document.getElementById('tdAutomated').style.textAlign='right';
Upon inspection in IE Dev Tools, it appears that there is an unhandled exception for the second line of javascript. The error states "Object doesn't support property or method."
To address this issue, a class was added to the <td>.
<td id="tdAutomated" class="tblRight">
The text-align style was then applied to this class. Subsequently, the javascript was modified to test two other methods: .hasClass and .addClass. Unfortunately, both of these alternative solutions failed as well.
Is there a method available that would correctly set the alignment or allow the addition of the class?
EDIT: Here are screenshots depicting the current display and what is being detected by Dev Tools within the HTML. Based on these diagnostics, it appears that there should be no reason why the cell's alignment shouldn't revert back to its original state.