Question

起初我使用的是日期选择器。从那个日期选择器，我得到一个日期值。然后，从一个Url我得到另一个JSON值。这工作正常。一旦我有这些值，我想以表格格式显示它们。到目前为止，我无法以表格格式显示我的数据。

$(document).ready(function(){
    $('#datepicker').datepicker({
        dateFormat: 'dd/mm/yy', 
        onSelect: function() { 
            var d = $('#datepicker').datepicker({ dateFormat: 'dd/mm/yy' }).val();
            //alert("date!!!!" + date);
            $(".current" ).empty();
            $(".current" ).append("<table border='0'>");
            $(".current" ).append("<tr>");
            $(".current" ).append("<th>Time</th>");
            $(".current").append("   "); 
            $(".current").append("<th>EventName</th>");
            $(".current").append("   "); 
            $(".current").append("<th>EventDescription</th>");
            $(".current").append("   "); 
            $(".current").append("<th>Image</th>");
            $(".current" ).append("</tr>");

            $.getJSON('http://xx:80/xxx/xxx/xx/xx/SampleWork_SA/?xx=xx&source=xx&cmpntname=x', function (data) {
                $.each(data, function(key, val) {
                    if (d === val.Date) {
                        var row = $("<tr><td>" + val.Time +"  " + "</td><td>"+"  " + val.EventName +"  " + "</td><td>"+"  " + val.EventDescription +" " + '<img class="meeting" src="http://localhost:10039' + val.Image + '" alt="" />' +"</td></tr>");
                        $(".current").append("</table>");
                        $(".current").append(row);
                    }
                });
            });
        }
    });
});

Answer 1

当您使用.append()时，它会立即添加到DOM中，因此您必须生成无效的HTML。

所以解决方法是在追加

之后生成字符串

var html = "";
html += "<table border='0'>";
html += "<tr>";
html += "<th>Time</th>";
html += "<th>EventName</th>";
html += "<th>EventDescription</th>";
html += "<th>Image</th>";
html += "</tr>";

$.getJSON('http://xx:80/xxx/xxx/xx/xx/SampleWork_SA/?xx=xx&source=xx&cmpntname=x', function (data) {
    $.each(data, function(key, val) {
        if (d === val.Date) {
            var row = $("<tr><td>" + val.Time +"  " + "</td><td>"+"  " + val.EventName +"  " + "</td><td>"+"  " + val.EventDescription +" " + '<img class="meeting" src="http://localhost:10039' + val.Image + '" alt="" />' +"</td></tr>");
            html += row;
        }
    });
    html += "</table>";
    $( ".current" ).html(html);
});

Answer 2

尝试在这些行上使用.html（）而不是.append（）

$(".current" ).append("</table>");
$( ".current" ).append(row);

这将使用行var。

中的表规范替换元素的html

可以找到文档here

Answer 3

我清理了很多关于此代码的内容，但对我而言的是$(".current").append("</table>");

我想你会在$.each完成之后提出这个问题。否则你太早关闭你的桌子。

如何动态创建表？

3 个答案: