为什么我不能动态绘制我的表?我怎么画桌子呢?

Readers,

读者,

Background: I have an html page with a submit button on it. This button, when clicked goes to the servlet and fetches the first 10 rows of data from my database. I then get this data back to my javascript via an ajax call. That all works. I can see the data in json format in my javascript.

背景:我有一个带有提交按钮的html页面。当单击此按钮时，将转到servlet并从数据库中获取前10行数据。然后通过ajax调用将数据返回到javascript。所有的作品。我可以在javascript中看到json格式的数据。

Problem: After the data is returned, it goes to a method called generate the table. But the table never shows on my html page. I tried to follow this demo approach. How can I draw a table after this method is being called? The <p></p> approach in the demo didn't work in the link I provided either.

问题:返回数据后，它会转到一个名为generate the table的方法。但是这个表从来不会显示在我的html页面上。我尝试采用这种演示方法。在调用此方法之后，如何绘制表?演示中的

方法在我提供的链接中也不起作用。

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;

    }

Okay, so the console.log part gives me the following output:

好的,所以控制台。log部分输出如下:

So I have the data. However, no database is being drawn on my htmlpage. Here is the relevant HTML code:

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

<body>

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


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

 </form>
</body>

I point out the button calls the ajax. There is no need to show you my ajax call because that works. It calls my createTable function when it gets the data back from the servlet. I know it is working because I can print the unique database id's with the console.log. However, the

我指出按钮调用ajax。没有必要向您展示我的ajax调用，因为它是有效的。当它从servlet获取数据时，它调用我的createTable函数。我知道它可以工作，因为我可以用console.log打印唯一的数据库id。然而,

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

is not working? Stranger is that when I run and view source on chrome. I see no error with the html. So I don't know what I am doing wrong?

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

2 个解决方案

#1

Here's the problem:

问题就在这里:

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

You set "tablecontents" to be only the </table> tag. Should be:

您将“tablecontents”设置为标记。应该是:

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

#2

tablecontents+="</table>" inplace of tablecontents="</table>"

tablecontents + = " < /表> "原地tablecontents = " < /表>

#1