Question

在下面的代码中，我有一个json数组，其中包含Name,FieldType,FieldValue。我想创建一个动态表并为其赋值。我尝试了以下代码，将以下数据显示在表格中。 Json数组格式：

[{"Name":"Date","FieldType":"TextBox","FieldValue":"12-12-2013"},{"Name":"Details","FieldType":"TextBox","FieldValue":"test"},
{"Name":"Date","FieldType":"TextBox","FieldValue":"05-12-2015"},{"Name":"Details","FieldType":"TextBox","FieldValue":"test1"}]

表格如下：

Date |  Details  |Date  | Details|
12-12-2013|test|05-12-2015|test1|

表格如下：

 Date |  Details  
    12-12-2013|test
 05-12-2015 |test1

代码：

 function LoadTableFields(sFieldID, Name, newdiv, FieldValue,TableValues) {

        var TblValues =JSON.parse( TableValues);

                alert(data.d);
                if (data.d != '') {
                    var TableDatas = JSON.parse(data.d);

                    var tHTML = '';
                    tHTML += '<table class="table table-bordered table-striped" id="table_' + sFieldID + '" name="' + Name + '"><thead><tr >';

                    $.each(TblValues, function (i, item) {
                        tHTML += '<th class="text-center">' + item.Name + '</th>';
                    });

                    tHTML += '</tr></thead><tbody><tr id="row_0" data-id="0">';

                    $.each(TblValues, function (i, item) {

                        if (item.FieldType == 'TextBox') {

                            tHTML += '<td data-name=' + item.Name + ' class="col-xs-3 form-group"><input type="text" id=' + item.Name + '0' + '  value=' + item.FieldValue + ' name=' + item.Name + '0' + ' placeholder=' + item.Name + ' class="form-control"/></td>';
                        }                        else {
                            tHTML += '<td data-name=' + item.Name + '></td>';
                        }

                    });

                    tHTML += '</tr></tbody></table>';
                    tHTML += '<a id="add_row_' + sFieldID + '" class="btn btn-default pull-left" onclick="AddNewTableRow(' + sFieldID + ');">Add Row</a><a id="delete_row_' + sFieldID + '" class="pull-right btn btn-default" onclick="DeleteTableRow(' + sFieldID + ');">Delete Row</a>';
                    newdiv.innerHTML += tHTML;

                    $('#divComplete').append(newdiv);



                }

            }

Answer 1

您可以跟踪找到的标题。然后确保标题行没有重复值。

var TblValues = [{"Name":"Date","FieldType":"TextBox","FieldValue":"12-12-2013"},{"Name":"Details","FieldType":"TextBox","FieldValue":"test"},
{"Name":"Date","FieldType":"TextBox","FieldValue":"05-12-2015"},{"Name":"Details","FieldType":"TextBox","FieldValue":"test1"}];

tHTML = '';

var headers = [];

$.each(TblValues, function (i, item) {
        if ( headers.indexOf(item.Name) === -1) {
            headers.push(item.Name);
            tHTML += '<th class="text-center">' + item.Name + '</th>';
        }
});

然后在添加表格单元格时，每次匹配第一个标题时添加行标记。匹配最后一个标题时完成该行。

看起来数据显示在列顺序中。这样的事情应该有效：

$.each(TblValues, function (i, item) {
    if (item.FieldType == 'TextBox') {

        if (item.Name === headers[0]) {
            tHTML += '<tr>';
        }

        tHTML += '<td data-name=' + item.Name + ' class="col-xs-3 form-group"><input type="text" id=' + item.Name + '0' + '  value=' + item.FieldValue + ' name=' + item.Name + '0' + ' placeholder=' + item.Name + ' class="form-control"/></td>';

        if (item.Name === headers[headers.length - 1] ) {
            tHTML += '</tr>';
        }
    }
});

console.log('tHTML\n' + JSON.stringify(tHTML));

Answer 2

你可以在你的每个内部取tr标签并检查count是否是2的倍数然后打开tr标签，否则关闭tr标签。

$.each(TblValues, function (i, item) {
    if(i%2 == 0)
        tHTML += '<tr>';
                if (item.FieldType == 'TextBox') {

                        tHTML += '<td data-name=' + item.Name + ' class="col-xs-3 form-group"><input type="text" id=' + item.Name + '0' + '  value=' + item.FieldValue + ' name=' + item.Name + '0' + ' placeholder=' + item.Name + ' class="form-control"/></td>';
                    }                        else {
                        tHTML += '<td data-name=' + item.Name + '></td>';
                    }


 if(i % 2 == 1)
   tHTML += "</tr>";
});

生成动态Html表的问题

2 个答案: