Dynamic Table with repeating rows and IE compatibility view

Question

I have a table with repeating rows. Each row contains multiple datepickers from here, populated by javascript.

As shown below, I noticed that the datepickers don't seem to appear when using either Firefox or IE9 with Compatibility View turned OFF.

It appears to work correctly in IE8.

• Does any one know what might cause this problem and how I can fix it?

Here's a Live Demo on JSfiddle

Thanks for your help!

Answer 1

JavaScript on certain browsers can be very finicky when it comes to spaces inside elements.

In your case, in your table cells, there are actual space characters before the <input> elements. When that happens, childNodes[0] in FireFox and/or IE9 without compatibility mode references that space instead of the first HTML element.

Either remove the spaces in your HTML, or trim the spaces in your JavaScript when setting the innerHTML of the new cell.