表头中的输入框不起作用

Question

I have a problem with a table header containing input boxes. I have similar div's in the rest of the table and they work fine. the div is hidden by default, and is absolutely positioned The table inside the div usually just contains a few columns with a single form element in each column. This would be typical:

<a>show editrow</a>
<div class="editrow">
    <form>
        <table>
            <tr>
                <td>
                    <input type="text" />
                </td>
                ...
                <td>
                    <input type="submit" />
                </td>
            </tr>
        </table>
    </form>
</div>

I have this in a th element in the header, and in each table row below. When I put it in a th element I can't click on the input boxes, but the select boxes, and checkboxes work fine. I am using JQuery table sorter so my table headers have to use thead, tr, th tags. The frustrating thing is the only difference between what works and what doesn't work is the containing cell, td vs, th. like so:

<th>
    doesn't work
</th>

vs.

<td>
    does work
</td>

The only fix I have found is to move the div outside of the header, and use some more complicated javascript to find it so I can show/hide it/etc. I don't like that solution, because I'd have to rewrite a lot of pages, and it just doesn't make sense. I put the link and div in the header to keep it from being sorted with the rest of the table.

Any ideas as to why? or how I can fix it without removing the div from all my table headers?

Answer 1

I've created a quick test page with an input field in the header and it worked fine in all the browsers I tested it in.

Have you tried removing all the jQuery code from the page and then testing it? I could be something in the jQuery table sorter code that disables input fields for some reason.

Have you used something like firebug to inspect the input element to see if it's disabled or hidden behind some other element making it unclickable?