Question

读者，

背景：我有一个带有提交按钮的html页面。单击此按钮进入servlet并从我的数据库中获取前10行数据。然后我通过ajax调用将这些数据恢复到我的javascript。这一切都有效。我可以在我的javascript中看到json格式的数据。

问题：返回数据后，将转到名为generate table的方法。但该表从未在我的html页面上显示。我试着按照这个演示approach。在调用此方法后如何绘制表格？演示中的<p></p>方法在我提供的链接中不起作用。

function createTable(result)
    {
        var length = result.jsonList.length;
        var tablecontents = "";
        console.log(length);
        tablecontents="<table>";
        for(var i = 0; i < length; i++)
        {
            tablecontents += "<tr>"
            tablecontents += "<td>" + result.jsonList[i].Id + "</td>"
            tablecontents += "</tr>"
            console.log(result.jsonList[i].Id);
        }
        tablecontents="</table>";
        document.getElementById("tablespace").innerHTML = tablecontents;

    }

好的，所以console.log部分给了我以下输出：

所以我有数据。但是，我的htmlpage上没有绘制数据库。以下是相关的HTML代码：

<body>

  <form id = "submitTable" method="post">


        <center><input id="getTable" type="button" value="Table"></center>  
        <div id="tablespace"></div>

 </form>
</body>

我指出按钮调用ajax。没有必要向你展示我的ajax电话，因为它有效。它从servlet获取数据时调用我的createTable函数。我知道它正在工作，因为我可以使用console.log打印唯一的数据库ID。但是，

document.getElementById("tablespace").innerHTML = tablecontents

不工作？奇怪的是，当我运行并查看chrome上的源代码时。我看到html没有错误。所以我不知道我做错了什么？

Answer 1

tablecontents+="</table>"取代tablecontents="</table>"

Answer 2

问题在于：

    tablecontents="</table>";
    document.getElementById("tablespace").innerHTML = tablecontents;

您将“tablecontents”设置为仅 </table>标记。应该是：

    tablecontents += "</table>"; // += not =
    document.getElementById("tablespace").innerHTML = tablecontents;

为什么我不动态画我的桌子？我怎么画桌子？

2 个答案: