0

In an html form, I have a table that I hide or display based on a radio button choice. When the table is hidden and then brought back, one of the style settings is lost. I would like to keep the same layout when the table is displayed.

HTML 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>

JS for the radio button just the relevant part

document.getElementById('tblAutomated').style.display='block';
document.getElementById('tdAutomated').style.textAlign='right';

But IE Dev Tools shows an unhandled exception for that second JS line. "Object doesn't support property or method."

So, I tried adding a class to the <td>.

<td id="tdAutomated" class="tblRight">

and I added the text-align style to that class. Then I changed the JS to try two other methods: .hasClass and .addClass. But both of those methods failed, too.

Is there a method that will either set that alignment correctly or allow the class to be added?

EDIT Here are the images of what I see and what Dev Tools shows is happening in the HTML. Using both methods, I see no reason why the cell shouldn't go back to where it was originally.

enter image description here

jasotastic
  • 396
  • 1
  • 2
  • 16
  • Theres this little known library called `jQuery` that makes all this stuff a cinch to do. Seriously, `.addClass()`, `.removeClass()`, `.css()`, ... - and its cross-browser compatible so it fixes all those nasty IE bugs for you. Check it out! Otherwise, add/remove class: http://stackoverflow.com/questions/6787383/how-to-add-remove-a-class-in-javascript (You should really search SO first!) – somethinghere Jun 11 '15 at 15:40
  • For the posted HTML, there's nothing wrong with the second JS line, whether the table is hidden or not. Are you sure the `tdAutomated` cell still exists after you re-display the table? – Rick Hitchcock Jun 11 '15 at 15:52
  • @RickHitchcock The error that was being thrown turned out to be a typo on my part. I have corrected that typo, but I still have the same problem. I have added a picture to try to help explain what I'm seeing. – jasotastic Jun 11 '15 at 16:40
  • Maybe the question I should be asking is, can I force the element to double-check its class and style settings (and apply them) without refreshing the entire page and losing what the user has entered? – jasotastic Jun 11 '15 at 16:43

1 Answers1

0

I was able to resolve this by putting the table inside a <div> and changing the display for that, instead.

jasotastic
  • 396
  • 1
  • 2
  • 16