Hi,

I have a HTML Table that I populate using JQuery according to if a user clicks certain buttons and enters certain data. Finally when the user wants to submit this form, I have a validation piece of code that attempts to check if the Table is empty or not. I use JQuery in all of this, and it seems to work in FireFox and Chrome, but not in IE?

My initial HTML Table looks like:

1. <table id="myTable">
2. <thead>
3. <th>Column1</th>
4. <th>Column2</th>
5. </thead>
6. <tbody>
7. </tbody>
8. </table>

My Code to Add a Row is:

1. var $tdContent = '<tr>\n' ;
2. $tdContent += '<td>' + $Column1Data + '</td>\n';
3. $tdContent += '<td>' + $Column2Data + '</td>\n';
4. $tdContent += '</tr>\n';
5. $('tbody', $('#myTable')).append($tdContent);

Finally when I have to validate my form, I do something like:

1. if($('# myTable tr').length == 0) {
2. //Complain that the Table is Empty
3. }

This works fine on FireFox and Chrome, but on IE it does not complain if the Table is empty. I then put the following code for debugging above it i.e.:

1. var $myTableTr = $('# myTable tr');
2. alert('MyTable Tr Length ' + $myTableTr.length);
3. var $myTableTrTds = $myTableTr.eq(0).find('td');
4. alert('MyTables Tds Length ' + $myTableTrTds.length);

It seems that

1. MyTable Tr Length 1
2. MyTables Tds Length 0

On FireFox and Chrome, both of the above are 0. I am wondering why in IE does an empty tr get introduced?

Thanks a lot to you guys for your help,