Question

我正在尝试构建一个生成自定义列表项的应用程序，该项目将动态显示在屏幕上（如联系人列表更新），并且具有以下代码，这些代码在IE和Firefox上都运行良好。

<html>
<head>
    <style type="text/css">

    .divCss table{
    width:100%;
    height:130px;
    }

    .divCss {
    width:100%;
    height:100%;
    border:solid 1px #c0c0c0;
    background-color:#999000;
    font-size:11px;
    font-family:verdana;
    color:#000;
    }

.divCss table:hover{
    background-color :#FF9900;
}

    </style>

    <script type="text/javascript" language="javascript">   

    var elementCounts = 0;

    function myItemClicked(item)
    {
        alert("item clicked:"+item.id);

    }

    function createItem()
    {
        var pTag = document.createElement("p");
            var tableTag = document.createElement("table");

            tableTag.id = "" + (elementCounts++);

            tableTag.setAttribute("border","1");
            tableTag.setAttribute("cellpadding","5");
            tableTag.setAttribute("width","100%");
            tableTag.setAttribute("height","130px");
            tableTag.onclick = function() {myItemClicked(this);};

                var tBody = document.createElement("tbody");
                    var tr1Tag = document.createElement("tr");

                        var tdImageTag = document.createElement("td");
                        tdImageTag .setAttribute("width","100px");
                        tdImageTag .setAttribute("rowspan","2");

                            var imgTag = document.createElement("img");
                            imgTag.setAttribute("width","100px");
                            imgTag.setAttribute("height","100px");
                            imgTag.id = "avatar";

                        tdImageTag .appendChild(imgTag);

                        var tdTextTag= document.createElement("td");
                        tdTextTag.setAttribute("height","30%");
                        tdTextTag.setAttribute("nowrap","1");
                        tdTextTag.setAttribute("style","font-weight: bold; font-size: 20px;");
                        tdTextTag.id = "text";
                        tdTextTag.innerHTML = "text";

                    tr1Tag.appendChild(tdImageTag);
                    tr1Tag.appendChild(tdTextTag);

                    var tr2Tag = document.createElement("tr");
                        var tdAnotherTextTag = document.createElement("td");
                        tdAnotherTextTag.setAttribute("valign","top");
                        tdAnotherTextTag.id = "anotherText";
                        tdAnotherTextTag.innerHTML = "Another Text";

                    tr2Tag.appendChild(tdAnotherTextTag );

                tBody.appendChild(tr1Tag);
                tBody.appendChild(tr2Tag);
            tableTag.appendChild(tBody);
        tableTag.className ="divCss";
        pTag.appendChild(tableTag);
        document.getElementById("list").appendChild(pTag);
    }

    function clearList()
    {
        document.getElementById("list").innerHTML = "";
        elementCounts = 0;
    }

    </script>

</head>
<body>
   <input id="btn1" type="button" value="create item" onclick="createItem();" />
   <input id="btn2" type="button" value="clear list" onclick="clearList();" />
<div id="list" class="divCss" style="overflow: scroll;"></div>    
</body> 
</html>

此代码在单击“创建项目”按钮时生成一个新的表元素，并将其添加到主页面上的div元素内。

表元素应该类似于以下

+---------------+--------------------+
|               |        Text        |
|  Image with   |                    |
|  rowspan of   +--------------------|
|       2       |     Another Text   |
|               |                    |
+---------------+--------------------+

上面的代码在firefox上正确显示，但在IE上，rowspan有点被忽略，输出看起来像

+---------------+--------------------+
|  Image with   |        Text        |
|rowspan ignored|                    |
|---------------+--------------------|
| Another Text  |                    |
|               |                    |
+---------------+--------------------+

任何人都可以帮助我为什么必须这样做？我还检查了编写直接标记（而不是使用createElement和appendChild），这是有效的，但动态生成似乎是一个问题。我在做什么呢？

此外，在div元素（“list”）中添加生成的表元素后，连续表元素之间似乎存在一些差距，即使我在div标签中指定margin和padding为0，也无法将其删除。

非常感谢任何帮助。感谢。

编辑：关于div内表元素之间的差距。 这是预期的输出:(这在jsfiddle中起作用，由Shadow Wizard建议）。

+------------------------------------+
| List Element 1                     |
+---------------+--------------------+
|               |        Text        |
|  Image with   |                    |
|  rowspan of   +--------------------|
|       2       |     Another Text   |
|               |                    |
+---------------+--------------------+
| List Element 2                     |
+---------------+--------------------+
|               |        Text        |
|  Image with   |                    |
|  rowspan of   +--------------------|
|       2       |     Another Text   |
|               |                    |
+---------------+--------------------+
| List Element 3                     |
+---------------+--------------------+
|               |        Text        |
|  Image with   |                    |
|  rowspan of   +--------------------|
|       2       |     Another Text   |
|               |                    |
+---------------+--------------------+

这是我在chrome上获得的输出，即firefox ..

+------------------------------------+
| List Element 1                     |
+---------------+--------------------+
|               |        Text        |
|  Image with   |                    |
|  rowspan of   +--------------------|
|       2       |     Another Text   |
|               |                    |
+---------------+--------------------+
              Gap
+------------------------------------+
| List Element 2                     |
+---------------+--------------------+
|               |        Text        |
|  Image with   |                    |
|  rowspan of   +--------------------|
|       2       |     Another Text   |
|               |                    |
+---------------+--------------------+
               Gap
+------------------------------------+
| List Element 3                     |
+---------------+--------------------+
|               |        Text        |
|  Image with   |                    |
|  rowspan of   +--------------------|
|       2       |     Another Text   |
|               |                    |
+---------------+--------------------+

很抱歉解释这样的事情。我无法上传我的快照。但是，您可以通过在任何浏览器中将页面打开为html文件来查看jsfiddle与其他浏览器效果之间的区别。

编辑（Shadow_Wizard） - 这是屏幕截图： enter image description here

Answer 1

在IE中，attributes非常有限，最好“直接”设置，而不是setAttribute。

请改为尝试：

tdImageTag.rowSpan = 2;

宽度和高度相同：最好将它们设置为style：

的一部分

imgTag.style.width = "100px";
imgTag.style.height = "100px";

编辑：间隙是指标有红色圆圈的部分吗？ enter image description here

编辑II：如果你看到jsFiddle和你自己的文件之间的区别，这可能意味着你缺少DOCTYPE声明。尝试在<html>标记上方的代码顶部添加此行：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

jsFiddle自己添加这样的行，你可以查看源代码来查看它。

另外，我看到你在本地运行文件...这也不好你最好把它作为网站的一部分运行来模拟“真实”的网页。

Answer 2

尝试tdImageTag.setAttribute("rowSpan","2"); - 它必须是大写字母S
表元素之间可能会出现间隙，因为默认的cellspacing会尝试以下代码：tableTag.cellSpacing=0;

此外，如果您使用严格模式，您可以在css中设置cellspacing： table.divCss {border-spacing:0;}

table setAttribute在IE中无法正常工作

2 个答案: