Javascript IE 9未显示由js填充的表_Javascript_Html

Javascript IE 9未显示由js填充的表

javascript html

Javascript IE 9未显示由js填充的表,javascript,html,Javascript,Html,我对IE 9中没有显示的“addedItems”表有一个问题，但如果在Firefox 30显示器上使用，它应该是这样的。在IE中，它发送post数据，当我使用开发工具检查HTML时，它会在页面上显示HTML元素。我试图查看是否将表格显示设置为块，但没有任何更改此代码的目的是允许用户从下拉列表中选择要添加的设备类型，然后能够将Foo或Bar列表中的任意数量的项目添加到表中，以在items[]post变量中发送。该表的每一行都有一个删除按钮，以便用户可以取出错误添加的设备以下是HTML文件： &

我对IE 9中没有显示的“addedItems”表有一个问题，但如果在Firefox 30显示器上使用，它应该是这样的。在IE中，它发送post数据，当我使用开发工具检查HTML时，它会在页面上显示HTML元素。我试图查看是否将表格显示设置为块，但没有任何更改

此代码的目的是允许用户从下拉列表中选择要添加的设备类型，然后能够将Foo或Bar列表中的任意数量的项目添加到表中，以在items[]post变量中发送。该表的每一行都有一个删除按钮，以便用户可以取出错误添加的设备

以下是HTML文件：

<html>  
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    </head>
    <body>
    <form method="post">
        <ul>
            <li id="EquipmentSelector" >
                <label for="EquipmentType">Equipment Type</label>
            <div>
                <select id="EquipmentType" name="EquipmentType">

                    <option value="" selected="selected"></option>
                    <option value="0" >Foo</option>
                    <option value="1" >Bar</option>

                </select>
            </div>

        </li>
        <li id = "FooHolder">

            <label class="description" for="Foo">Foo</label>


                <select id="Foo">

                    <option value="" selected="selected"></option>

                        <option value="0" >Foo Zero</option>
                        <option value="1" >Foo One</option>
                        <option value="2" >Foo Two</option>
                        <option value="3" >Foo Three</option>

                </select>




            <input type = "button" value = "Add Foo" id = "FooClick" ></input>

        </li>
        <li id = "BarHolder">

            <label class="description" for="Bar">Bar</label>

                <select id="Bar">

                    <option value="" selected="selected"></option>

                    <option value="0" >Bar Zero</option>
                    <option value="1" >Bar One</option>
                    <option value="2" >Bar Two</option>
                    <option value="3" >Bar Three</option>

                </select>


            <input type = "button" value = "Add Bar" id = "BarClick" ></input>

        </li>

        <li>
        <table>
                    <tbody  id = "addedItems">
                    </tbody>    
        </table>
        </li>
        <li>

            <input type= "submit" id="saveForm" name="submit" value="Submit"  />

        </li>
    </ul>

    </form>

    <script src = "IEerror.js"></script>
    </body>
</html>

编辑：

这里有一个指向JSFIDLE的链接：

多么可怕的代码，但让我们开始：

验证您的HTML。i、 e.您的

包含HTML5

，而不是

为什么要通过彼此使用本机JS和jQuery？为什么不坚持jQuery

无论如何，我挑剔的

，要解决您的问题，请将您的

代码更改为：

<table>
    <tbody id="addedItems">
    </tbody>
</table>

这是因为IE9将在一个空的

中创建一个空的

，并将其用作表占位符，您将

和

标记直接插入


中，以提供什么
？IE对无效的HTML不好。此外，您可能需要更新jQuery，例如IE11将不与jQuery <1.11一起工作。您应该真正考虑客户端模板引擎，这样您就可以去掉手工编码……<代码> <代码>是一个完全有效的标签。它只是一个名为header.hmm的HTML5 div，在再次查看他的代码后，我必须道歉xD teemu是对的，op使用header而不是head，这是错误的。另一种方法是使用方法而不是appendChild
。我发现它减轻了添加的需要。它也得到了相当广泛的支持。对不起，我不是故意粗鲁的（就像我说的我在吹毛求疵）。如果这是您的第一个代码，那么您的代码看起来很棒。
<table>
    <tbody id="addedItems">
    </tbody>
</table>