javascript - 如何在行下方使用JSON和Javascript填充表

我必须使用JSON和Javascript填充表，但数据将转到下一行。而我希望数据仅位于列标题行的下方
这是我的json：

 var myList = [{ "Column1": "abc" },
                { "Column2": "25" },
                { "Column3": "xyz" }];

给定的代码按以下顺序填充数据：

column1  column2 column3
abc

           25
                   xyz

但我希望像这样：

column1  column2 column3
abc        25       xyz

这是我的代码：

  var myList = [{ "Column1": "abc" },
            { "Column2": "25" },
            { "Column3": "xyz" }];
        $(document).ready(function ()
        {
            buildHtmlTable();
        });
        function buildHtmlTable()
        {
            var columns = addAllColumnHeaders(myList); // columns get the name of coluns
            alert("test :  " + myList);
            for (var i = 0 ; i < myList.length ; i++)
            {
                var row$ = $('<tr/>');
                for (var colIndex = 0 ; colIndex < columns.length ; colIndex++)
                {

                    var cellValue = myList[i][columns[colIndex]];
                    if (cellValue == null) { cellValue = ""; }

                    row$.append($('<td/>').html(cellValue));
                }
                $("#excelDataTable").append(row$);
            }
        }

编辑

function addAllColumnHeaders(myList)
{
    var columnSet = [];
    var headerTr$ = $('<tr/>');

    for (var i = 0 ; i < myList.length ; i++)
    {
        var rowHash = myList[i];
        for (var key in rowHash)
        {
            if ($.inArray(key, columnSet) == -1)
            {
                columnSet.push(key);
                headerTr$.append($('<th/>').html(key));
            }
        }
    }
    $("#excelDataTable").append(headerTr$);

    return columnSet;
}

和

   <table id="excelDataTable" class="contentpanel" border="1"></table>

最佳答案

将var row$ = $('<tr/>');移出循环。无需双循环。尝试这个：

var myList = [{ "Column1": "abc" },
            { "Column2": "25" },
            { "Column3": "xyz" }];
        $(document).ready(function ()
        {
            buildHtmlTable();
        });
        function buildHtmlTable()
        {
            var columns = addAllColumnHeaders(myList); // columns get the name of coluns
            //alert("test :  " + myList);
            var row$ = $('<tr/>');
            var colIndex = 0;
            for (var i = 0 ; i < myList.length ; i++)
            {
                var cellValue = myList[i][columns[colIndex]];
                if (cellValue == null) { cellValue = ""; }
                row$.append($('<td/>').html(cellValue));

                $("#excelDataTable").append(row$);
                colIndex++;
            }
        }

        function addAllColumnHeaders(myList)
{
    var columnSet = [];
    var headerTr$ = $('<tr/>');

    for (var i = 0 ; i < myList.length ; i++)
    {
        var rowHash = myList[i];
        for (var key in rowHash)
        {
            if ($.inArray(key, columnSet) == -1)
            {
                columnSet.push(key);
                headerTr$.append($('<th/>').html(key));
            }
        }
    }
    $("#excelDataTable").append(headerTr$);

    return columnSet;
}