1

読者の皆様

背景: 送信ボタンのある html ページがあります。このボタンをクリックすると、サーブレットに移動し、データベースから最初の 10 行のデータをフェッチします。次に、このデータを ajax 呼び出しを介して JavaScript に戻します。それはすべてうまくいきます。私のjavascriptでjson形式のデータを見ることができます。

問題: データが返された後、テーブルの生成と呼ばれるメソッドに進みます。しかし、テーブルが私のhtmlページに表示されることはありません。このデモのアプローチに従おうとしました。このメソッドが呼び出された後にテーブルを描画するにはどうすればよいですか? デモの<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 の部分には次の出力が表示されます。

1
2
3
4
5
6
7
8
9 
10

だから私はデータを持っています。ただし、私のhtmlページにはデータベースが描画されていません。関連する HTML コードは次のとおりです。

<body>

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


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

 </form>
</body>

ボタンがajaxを呼び出すことを指摘します。それが機能するため、私のajax呼び出しを表示する必要はありません。サーブレットからデータを取得するときに createTable 関数を呼び出します。console.log で一意のデータベース ID を出力できるので、機能していることはわかっています。しかし

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

動かない？見知らぬ人は、クロムでソースを実行して表示するときです。html にエラーは表示されません。だから私は間違っていることを知りませんか？

4

2 に答える 2