在将JSON数据绑定到HTML表Jquery的同时，从JSON绑定每个表列（标题）的选择下拉列表

Question

I have a dynamic table populated from JSON data. I want to have a select dropdown for each column. The number of columns are not fixed. They are populated by JSON. So I want the select dropdown at the top each column. This Dropdown also should be populated by 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"
  }
]

Currently, this is my table:

I want the table to be like this:

Please Help. Thanks in advance.

Answer 1

You can do it this way-

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

Your 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);

Update

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

Not a good way but should do what you want from jsonObject.

I've changed something in the script for showing the select box row at the top before headers.

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>'