无法显示jQuery动态表

时间:2017-04-24 11:04:25

标签: jquery

我正在尝试使用jQuery创建动态表,该表必须包含JSON对象属性,但无法实现我的问题所在。我得到的是[object Object]。当console.log(data[i].title)说出来时,它给了我正确的输出。你们可以看看并给我一些建议吗?谢谢!(我也试过文字而不是价值。)

$.ajax({
    type : 'GET',
    url : '../post/search-tag?tag='+input,
    dataType : 'json',
    success : function( data ){
        if(data.length == 0){
            alert('No posts found!');
        }else{
            $('#posts').css('display', 'none');
            $('.list-view').css('display', 'initial');
            var table = document.createElement('table');
            var thead = document.createElement('tr');
            table.append(thead);

            var title = document.createElement('td');
            var textTitle = document.createTextNode('Title');
            title.append(textTitle);

            var content = document.createElement('td');
            var textContent = document.createTextNode('Content');
            content.append(textContent);

            var date = document.createElement('td');
            var textDate = document.createTextNode('Create Date');
            date.append(textDate);

            thead.append(title);
            thead.append(content);
            thead.append(date);

            for(var i=0; i < data.length; i++){
                var aTitle = $('<a>', {
                    value : data[i].title,
                    href : '../post/view?id=' + data[i].post_id
                });
                var aContent = $('<a>', {
                    value : data[i].content,
                    href : '../post/view?id=' + data[i].post_id
                });
                var aDateCreate = $('<a>', {
                    value : data[i].date_create,
                    href : '../post/view?id=' + data[i].post_id
                });

                var tr = document.createElement('tr');

                tr.append($('<td>', {}).append(aTitle));

                tr.append($('<td>', {}).append(aContent));

                tr.append($('<td>', {}).append(aDateCreate));

                table.append(tr);
            }

            $('.list-view').prepend(table);
            $('.list-view').find('table').addClass('table customize');
        }
    }
});

JSON object in the console output

1 个答案:

答案 0 :(得分:1)

您忘记将text属性包含在href对象中:(将其添加到您拥有的每个href标记中)

 var aTitle = $('<a>', {
            value : data[i].title,
            text : 'Something',
            href : '../post/view?id=' + data[i].post_id
 });

另外:使用Jquery时要保持一致:(那就是你得到[object Object] [object Object] [object Object])

的原因

更改此行:

var tr = document.createElement('tr');

到: var tr = $('<tr>');