如何使用行下方的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>