Question

我正在开发网络应用程序，我需要显示来自服务器的数据，这些数据是瓷砖中的json格式。我已经制作了一组四个瓦片，它们代表一个事件，即每个瓦片代表同一事件的不同参数。现在，来自服务器的事件数量是动态的，因为服务器不断更新。因此，我需要编写用于动态创建这四个图块的代码，以便在服务器上点击一个按钮，让事件数量为10，我应该有10个这四个图块。此外，我需要在同一页面上显示它，以便在滑动（向右或向左）时，我将一次获得一组事件。以下是我的代码的一部分：http://jsfiddle.net/archana85/n6sunk1r/1/

我在网上搜索过我尝试过使用document.createElement。我的部分代码是：

$(document).ready(function() {
    $('#milk').click(function() {
        var iCnt = 0;
        // CREATE A "DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS.
        var container = $(document.createElement('div'))
    });
    if (iCnt <= myJSON.length) {
        // ADD BOX.
        $(container).append('<input type=text class="input" id=tb' + iCnt + ' ' + 'value="Text Element ' + iCnt + '" />');

现在我没有到达这里我应该如何添加框，因为每个框有三个不同的字段，每个字段都有不同的id。我的代码是在javascript和jquery中。提前致谢。

Answer 1

用于＆＃34;框创建＆＃34;部分，我做了这个简单的例子：

value

我已经更新了你的小提琴： http://jsfiddle.net/n6sunk1r/5/

但似乎你的html / css布局稍微搞砸了所以添加多个＆＃34;框＆＃34;不能很好地工作。

也许你仍然知道如何继续现在。

然后，您可以将$("button").on("click", function () { $("#box-container-right").append( '<li class="box4">' + '<h5 align=left>Temperature<h5>' + '<h5 align=center>Value<h5>' + '<h6 aligh=right>Celcius<h6>' + '</li>'); });部分包装到您的ajax-success或-done回调中，并用数据填充。

如何动态创建框并显示来自服务器

1 个答案: