0

我正在尝试构建一个生成自定义列表项的应用程序，该列表项将动态显示在屏幕上（如联系人列表更新），并且具有在 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 上，行跨度被忽略了，输出看起来像

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

谁能帮助我为什么这一定会发生？我还检查了编写直接标签（而不是使用 createElement 和 appendChild），这很有效，但是动态生成似乎是有问题的。我在这里做什么？

此外，在 div 元素（“list”）中添加生成的表格元素后，连续表格元素之间似乎存在一些差距，即使我在 div 标签中将边距和填充指定为 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） - 这是截图： 在此处输入图像描述

4

2 回答 2

3

在 IE 中，attributes它们非常有限，最好“直接”设置，而不是通过setAttribute.

试试这个：

tdImageTag.rowSpan = 2;

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

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

编辑：间隙是指用红色圆圈标记的部分吗？
在此处输入图像描述

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

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

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

另外，我看到您正在本地运行该文件……这也不好，您最好将其作为网站的一部分运行以模拟“真实”网页。

于 2011-05-05T14:11:40.120 回答
1

试试tdImageTag.setAttribute("rowSpan","2");——它必须是大写的 S
表格元素之间可能会出现间隙，因为默认的单元格间距试试这个代码：tableTag.cellSpacing=0;

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

于 2011-05-05T13:59:01.740 回答