在IE8中动态添加tr和td设计问题

Question

HTML设计：

<tr class="for_check">
<td>Name</td>
<td><input name="check1" class="required username" type="text" size="35"> </td>
</tr>
<tr class="for_check">
<td>Roll</td>
<td><input name="roll"  class="username" type="text" size="35"></td>
</tr>
<tr id="my_div" class="for_check">
<td colspan="2"></td>
</tr>
<tr class="for_check">
<td></td>
<td><input type="button" value="Add More" class="addmore" onClick="addInput();">&nbsp;
<input type="button" value="Remove" onClick="Remove_btn();">
</td>
</tr>
<table>

单击"添加更多"按钮时，调用以下javascript代码。

javascript代码：

var name = document.createElement('tr');
name.className="for_check_"+no; 
name.innerHTML = "<td>Name</td><td><input type='text' size='35'   
name='name"+no+"'    class='required username'/></td>";
var roll= document.createElement('tr');
roll.className="for_check_"+no; 
roll.innerHTML = "<td>Roll</td>
<td ><input type='text' size='35'   name='roll"+no+"' class='required username' 
id='ass"+no+"'/></td>";
$("#my_div").before(name);
$("#my_div").before(roll);  

i、 e单击"添加更多"按钮，然后动态添加tr。

在Mozilla和chrome中，动态添加tr和td，将之前未动态添加的tr和td位置放在前面。

Mozilla和chrome浏览器中的设计：

Name  textbox
Roll  textbox
Name  textbox  { dynamically add}
Roll  textbox  { dynamically add }

但在IE8中，当单击"添加更多"按钮时，会出现以下情况：

      Name  textbox
      Roll  textbox
Name textbox   { dynamically add}
Roll textbox   { dynamically add} 

动态添加名称，文本框和滚动，文本框放置在左侧位置。但我需要动态添加名称，文本框和滚动，文本框放置以前的名称，文本盒和滚动，文字框位置i，e

 Name  textbox
 Roll  textbox
 Name  textbox  { dynamically add}
 Roll  textbox  { dynamically add 

我能理解我的问题吗。请帮帮我。

Answer 1

我认为IE需要将表行显式添加到tbody元素中。

合适的结构是：

<table>
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>...</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>