| home / programming / javascript / ppk2 |
|
|
|
Creating tables and form fields in the W3C DOM is tricky if you don't know the ins and outs.
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:
Now all <tr>s are appended to the <tbody>, and the script works smoothly in all browsers.
cellIndex is buggy in Safari 2.0; it always returns 0.
The W3C DOM defines quite a few methods and properties for working with tables. Unfortunately, they suffer from a few browser-incompatibility problems, and even if they work perfectly they're far slower than traditional createElement()/appendChild() scripts. I advise you not to use most of these methods and properties.
The rowIndex and cellIndex properties may come in useful in some situations. They give the index number of a row in its table (rowIndex) or a cell in its row (cellIndex). There's also sectionRowIndex, which gives the index number of a row in its table section (thead, tbody, or tfoot).
innerHTML is badly supported for table elements other than <td>s. At the time of writing, it's not possible to set the innerHTML of the tbody, thead, or tfoot in Explorer or Safari.
Generating form fields is hard in Explorer. In theory, it seems simple:
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.
Switching to innerHTML offers a solution:
Now the radio buttons work as expected.
| home / programming / javascript / ppk2 |
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
URL:
