如何使用行下方的 JSON 和 Javascript 填充表格答案

【问题标题】：How to populate the table using JSON and Javascript just below the row如何使用行下方的 JSON 和 Javascript 填充表格
【发布时间】：2016-04-11 04:46:40
【问题描述】：

我必须使用 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>

【问题讨论】：

是否可以创建 jsfiddle 或 plunker ？我也无法复制它，因为 addAllColumnHeaders 没有定义
请看编辑部分
不确定您是如何获取 myList 的。它将进入下一行，因为您的 json 是三个独立对象的数组。下面的数组将但是一行中的项目 var myList = [ "Column1": "abc" ,"Column2": "25" ,"Column3": "xyz" }];请检查这个小提琴jsfiddle.net/vasi_32/q19xad1m/6

标签： javascript asp.net json html-table

【解决方案1】：

将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;
}

【讨论】：