PPK on JavaScript: The DOM - Part 2/Page 3 | WebReference

PPK on JavaScript: The DOM - Part 2/Page 3

[previous] [next]

PPK on JavaScript: The DOM - Part 2

Creating tables and form fields

Creating tables and form fields in the W3C DOM is tricky if you don't know the ins and outs.

Use <tbody>

Generating table elements like <td> or <tr> works, as long as you use a <tbody>, eschew the specialized DOM table methods, and don't use innerHTML too frequently.

Some browsers (Explorer, at the time of writing) require you to append your <tr>s to a <tbody>. If you append the <tr>s directly to the <table>, they simply don't show up. Sandwich Picker constantly moves <tr>s to other tables. For instance:

Unfortunately, this code gives errors in Explorer, because the browser cannot handle the newField.type. If we use setAttribute(), the error message disappears:

Another problem is that generated radio buttons don't work well in Explorer. Although it's possible to generate them through "pure" W3C DOM methods, the browser makes a mess of the name attributes of the radio buttons. Therefore, the generated radio buttons will likely not work as you expect them to.

How Radio Buttons Work: Remember: the user is allowed to check only one radio button in a group, and a group is defined as all radio buttons that share a name attribute. If the name attribute doesn't work correctly, the radio buttons won't work, either.

Switching to innerHTML offers a solution:

Now the radio buttons work as expected.

[previous] [next]