Question

我尝试遍历数组并在HTML表格中显示结果。数据来自网络服务。

我的JavaScript功能：

function loadDate() {

        var PanelID = document.getElementById('PanelID').value;
        alert(PanelID);

        $.ajax({
            type: "POST",
            url: "../../WebService/QRCode.asmx/getDatetime",
            data: "{ 'PanelID': '" + PanelID + "' }",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            cache: true,
            success: function(data) {

                var table = document.createElement('table');
                var str = '<table>';
                str += '<tr><th>Von</th><th>Bis</th><th>Thema</th></tr>';

                for(var i = 0; i < data.d.length; i++) {

                    str += '<tr><td>' + data.d[i].Von + '</td><td>' + data.d[i].Bis + '</td><td>' + data.d[i].Thema + '</td></tr>';

                }
                str += '</table>';
                return str;


                var existingDiv = document.getElementById('DataTable');
                existingDiv.innerHTML = loadDate(data);

            },
            error: function(x, e) {
                alert("The call to the server side failed. " + x.responseText);
            }
        });
    }

HTML部分

 <body>
    <h1>
        Check-In und Check-Out von Besprechungen</h1>

    <form id="form1" runat="server">
  <div id = "DataTable"> </div>
    <p>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        Raumname: 
        <br />
        <asp:TextBox type="text" name="Panels" ID="PanelID" value="" runat="server"></asp:TextBox>
        <br />
        <br />
        <asp:TextBox type="text" ID="Table" mode="multiline" runat="server" Coloumns="100" Rows="200"
            Height="230px" Width="405px"></asp:TextBox>


        <br />
        <br />
        <asp:Button ID="button" runat="server" Text="Check-In" Width="99px" OnClientClick="return loadDate();" />
        <asp:Button ID="button1" runat="server" Text="Check_Out" Width="99px" />
    </p>
    </form> 
</body>

问题是我的代码中有些东西无效。如果我使用上面的代码，我无法显示值。

我认为它与for子句有关，因为

我改变了FOR子句，例如：

 for(var i = 0; i < data.d.length; i++) {
                    var VonDatum = data.d[i].Von;
                    $("#Table").val(VonDatum);  
}

所以我可以在文本框中显示Von值。但是，如果我这样做，FOR子句只显示一个值，但数组中有超过30个值。

我的JSON-Data看起来像：

{"d":[{"Von":"18.05.2012 00:00:00","Bis":"18.06.2012 00:00:00","Thema":"Raum ist gesperrt","PanelIDs":"FAT-1"}]}

Answer 1

<强> OLD

return str;

var existingDiv = document.getElementById('DataTable');
existingDiv.innerHTML = loadDate(data);

新

var existingDiv = document.getElementById('DataTable'); existingDiv.innerHTML = loadDate(data); return str;

但是你的str没有在任何元素中设置，所以你要设置元素？像这样

var existingDiv = document.getElementById('DataTable'); existingDiv.innerHTML = str;

Answer 2

为什么有

return str;

你要把它归还给谁？你的代码应该是

吗？

existingDiv.innerHTML = loadDate(str);

迭代JSON数组并在HTML表格中显示结果

2 个答案: