javascript - 在 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>

当点击 Add More 按钮时，调用下面的 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>