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

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:

// Sandwich Picker, lines 86-89, condensed
var node = [tr that should move to search results];
document.getElementById('searchResults').appendChild(node);
I added the ID 'searchResults' not to the <table> tag, but to the <tbody> tag:
<table class="search" id="searchTable"><tr><td colspan="4" class="searchFieldContainer">
   <h4>Search for sandwiches</h4>
   <input id="searchField" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" /></td>
 </tr><tbody id="searchResults"/></table><p>
Now all <code><tr></code>s are appended to the <code><tbody></code>, and the script works smoothly in all browsers.</p>
<div>
<strong>No cellIndex in Safari:</strong> At the time of writing, <code>cellIndex</code> is buggy in Safari 2.0; it always returns 0.</div>
<h4>W3C DOM table methods and properties</h4>
<p>
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 <code>createElement()</code>/<code>appendChild()</code> scripts. I advise you not to use most of these methods and properties.</p>
<p>
The <code>rowIndex</code> and <code>cellIndex</code> properties may come in useful in some situations. They give the index number of a row in its table (<code>rowIndex</code>) or a cell in its row (<code>cellIndex</code>). There's also <code>sectionRowIndex</code>, which gives the index number of a row in its table section (<code>thead</code>, <code>tbody</code>, or <code>tfoot</code>).</p>
<h4>innerHTML</h4>
<p>
<code>innerHTML</code> is badly supported for table elements other than <code><td></code>s. At the time of writing, it's not possible to set the <code>innerHTML</code> of the <code>tbody</code>, <code>thead</code>, or <code>tfoot</code> in Explorer or Safari.</p>
<h4>Form fields in Explorer</h4>
<p>
Generating form fields is hard in Explorer. In theory, it seems simple:</p>
<div>
<textarea name="code" class="javascript" cols="60" rows="10" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" >
var newField = document.createElement('input');
newField.type = 'checkbox';
newField.name = 'My name';
newField.value = 'My value';
document.getElementById('theForm').appendChild(field);

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]

URL:

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