生成動態Html表的問題

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

您可以跟蹤的頭f你IND。然後確保標題行沒有重複的值。

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標籤裏面的每檢查次數是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>"; 
});