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，当我点击Add More按钮然后动态添加tr。

在Mozilla和chrome中动态添加tr和td，放置未动态添加的前一个tr和td位置。

在Mozilla和Chrome浏览器中进行设计：

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

但在IE8中，单击Add more按钮时会出现以下情况：

      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>

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

1 个答案: