javascript - 从 JSON 绑定(bind)每个表列(Head)的选择下拉列表，同时将 JSON 数据绑定(bind)到 HTML 表 Jquery

Question

我有一个由 JSON 数据填充的动态表。我想为每一列都有一个选择下拉菜单。列数不固定。它们由 JSON 填充。所以我希望在每列顶部都有选择下拉菜单。此下拉列表也应由 JSON 填充。

HTML:

<table id="jsonTable" class="table table-hovere">
</table>

Jquery:

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));
            }
         }
         }
         $("#jsonTable").append(headerTr$);

         return columnSet;
         }

         $.getJSON("data.json", function (data) {
         var columns = addAllColumnHeaders(data);

         for (var i = 0; i < data.length; i++) {
         var row$ = $('<tr/>');
         for (var colIndex = 0; colIndex < columns.length; colIndex++) {
            var cellValue = data[i][columns[colIndex]];

            if (cellValue == null) { cellValue = ""; }

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

JSON:

[
  {
    "Model": "Iphone 18",
    "Name": "iOS",
    "Share": 57.56,
    "Price Range": "$800 - $1000",
    "Brand": "Apple"
  },
  {
    "Model": "Nexus 23",
    "Name": "Android",
    "Share": 24.66,
    "Price Range": "$600 - $800",
    "Brand": "Samsung"
  },
  {
    "Model": "Tom-tom",
    "Name": "Java ME",
    "Share": 10.72,
    "Price Range": "$200 - $900",
    "Brand": "X Brand"
  }
]

目前，这是我的 table :

我希望表格是这样的:

请帮忙。提前致谢。

Answer 1

你可以这样做-

https://jsfiddle.net/9eemmbjc/1/

你的 json

var jsonResult=[
  {
    "Model": "Iphone 18",
    "Name": "iOS",
    "Share": 57.56,
    "Price Range": "$800 - $1000",
    "Brand": "Apple"
  },
  {
    "Model": "Nexus 23",
    "Name": "Android",
    "Share": 24.66,
    "Price Range": "$600 - $800",
    "Brand": "Samsung"
  },
  {
    "Model": "Tom-tom",
    "Name": "Java ME",
    "Share": 10.72,
    "Price Range": "$200 - $900",
    "Brand": "X Brand"
  }
]

jQuery

var rowArray = new Array();

$.each(jsonResult,function(index,item){
  row=$("<tr/>");
    row.prepend('<td><select><option>Some option</select></td>');
         $.each(item,function(inx,el){
         $(row).append('<td>'+el+'</td>');
    });
    rowArray.push(row);
})

$('table').html(rowArray);

更新

https://jsfiddle.net/9eemmbjc/2/

这不是一个好方法，但应该从 jsonObject 中执行您想要的操作。

我更改了脚本中的某些内容，以便在标题之前的顶部显示选择框行。

var selectRow= {
        Model:$('<select/>'),
        Name:$('<select/>'),
        Share:$('<select/>'),
        PriceRange:$('<select/>'),
        Brand:$('<select/>')
};

//select boxes at the top
$.each(jsonResult,function(index,item){
    selectRow.Model.append('<option>'+item.Model+'</option>');
    selectRow.Name.append('<option>'+item.Name+'</option>');
    selectRow.Share.append('<option>'+item.Share+'</option>');
    selectRow.PriceRange.append('<option>'+item["Price Range"]+'</option>');
    selectRow.Brand.append('<option>'+item.Brand+'</option>');
});

var dropdownRow= '<tr><th>'+selectRow.Model[0].outerHTML+'</th><th>'+selectRow.Name[0].outerHTML+'</th><th>'+selectRow.Share[0].outerHTML+'</th><th>'+selectRow.PriceRange[0].outerHTML+'</th><th>'+selectRow.Brand[0].outerHTML+'</th></tr>'