js根据json对象数组动态生成表格

1. 需求：(1).ajax取得json对象数组后，根据数组内所有json对象的所有key和value生成相应的表格标题和表格数据；
   (2).不显示json数据的某些key；
   (3).对某些key进行先后排序显示。
   2.js代码：

(function(){$("#queryButton").bind('click',function() {$.ajax({url:"...",type:"POST",dataType:"json",contentType:"application/json",data:{},success: function(response, statusText, xhr) {},error: function(jqXHR, textStatus, errorThrown) {alert("ajax error");//var responseJson = response.hits.hits;var tableHeaderColumnsTemp = [];var tableHeaderColumns = [];var firstRowTableHeaderToFrontSort = new Array("firstRowHeader004","firstRowHeader005","firstRowHeader002","firstRowHeader001");var excludeTableHeaderColumns = new Array("vjkigjeiogj","firstRowHeader003");var _sourceJsonObjArray = [{ "firstRowHeader001": 495934, "firstRowHeader002": "log", "firstRowHeader003": "cat", "firstRowHeader004": ["beats_input_codec_plain_applied","beats_input_codec_plain_applied2","beats_input_codec_plain_applied3","beats_input_codec_plain_applied4" ], "firstRowHeader005": {"secondRowHeader001": { "thirdRowHeader001": "dfjfiue"},"secondRowHeader002": { "thirdRowHeader002": "Marktet"},"key1": {"key2": {"key3":{"key4":{"key5":["mostInnerValue1","mostInnerValue2","mostInnerValue3"],"key6":["mostInnerValue4","mostInnerValue5","mostInnerValue6"]  }} }} }},{"nvurhvyuefoe": ["value001","value002","value003","value004"],"rthhn": "jtjnbgbhruik","abc": {"abd": "grthtyjkyiu","bcd": "gfethntyjymy","acd": "wqdegvgtrhx" }, "dedwefwef": "hythvtrbnyoq", "grtgr": {"7u65uj": { "mghhmujty": "rtetj"},"ujjtyjt": { "basic": "Marktet"},"jhjtkjtyr": "loiulyhgd","dadqwe": 1,"fdsfw": 42332,"hhrtghtr": true,"cfjewiofhr": "jfu","enfydqeg": 245577803567,"mbufhgr": "gtoeigjigo","dewgbtyj": "fertrhyuknbfg" }},{ "vjkigjeiogj": ["rwvebverqweju","jtyjrgcvfgvrthyoi" ],  "firstRowHeader005": {"secondRowHeader001": { "thirdRowHeader003": "dfjfiue"},"secondRowHeader002": {"thirdRowHeader004": "Marktet"},"secondRowHeader003": {"thirdRowHeader005": "Marktet"},},"last":{"key1": {"key2": {"key3":{"key4":{"key5":{"key6":[{"key7":"value7"},{"key7-":"value7-"}]}}}}}}}];//根据json对象数组得到所有标题for (var i = 0; i < _sourceJsonObjArray.length; i++) {    var _sourceJsonObj = _sourceJsonObjArray[i];    for(var p in _sourceJsonObj){    getTableHeaderFieldsArray(p,_sourceJsonObj[p],tableHeaderColumnsTemp,excludeTableHeaderColumns);    }}//去掉重复的标题$.unique(tableHeaderColumnsTemp);//所有含有相同上层父标题的标题存放在数组的相邻位置var tableHeaderRowNum = getTableHeaderRowNum(tableHeaderColumnsTemp);var tableHeaderColumnsTemp2 = [];placeHeaderColumns(0,tableHeaderColumnsTemp,tableHeaderRowNum,tableHeaderColumnsTemp2);//第一行标题排序sortFirstRowHeaderColumns(firstRowTableHeaderToFrontSort,tableHeaderColumnsTemp2,tableHeaderColumns);//创建或刷新表格createTable(tableHeaderColumns,_sourceJsonObjArray,excludeTableHeaderColumns);}})});})();function placeHeaderColumns(i,tableHeaderColumnsTemp,tableHeaderRowNum,tableHeaderColumnsTemp2) {    var tableHeaderColumnsTemp3  = [];    var fatherFieldsArray = [];    for (var index in tableHeaderColumnsTemp) {        var header = tableHeaderColumnsTemp[index];        if (header.indexOf(".") <= 0) {            tableHeaderColumnsTemp3.push(header);        } else if (header.indexOf(".") > 0) {            if ((header.split(".").length - 1) <= i) {                tableHeaderColumnsTemp3.push(header);                continue;            } else {                var fields = header.split(".");                var fatherFields = "";                for (var j = 0; j <= i; j++) {                    if (j == 0) {                        fatherFields = fields[0];                    } else {                        fatherFields += "." + fields[j];                    }                }                if (!hasDirectHeader(fatherFields,fatherFieldsArray)) {                    for(var innerIndex in tableHeaderColumnsTemp) {                        var innerHeader = tableHeaderColumnsTemp[innerIndex];                        if (innerHeader.indexOf(".") > 0 && (innerHeader.split(".").length - 1) > i) {                            var innerHeaderArray = innerHeader.split(".");                            var innerFatherFields                            for (var j = 0; j <= i; j++) {                                if (j == 0) {                                    innerFatherFields = innerHeaderArray[0];                                } else {                                    innerFatherFields += "." + innerHeaderArray[j];                                }                            }                            if (innerFatherFields == fatherFields) {                            tableHeaderColumnsTemp3.push(innerHeader);                            }                        }                    }                    fatherFieldsArray.push(fatherFields);                } else {                    continue;                }            }        }    }    if (i < (tableHeaderRowNum - 2)) {        placeHeaderColumns(i+1,tableHeaderColumnsTemp3,tableHeaderRowNum,tableHeaderColumnsTemp2);    } else {        for (var index in tableHeaderColumnsTemp3) {            tableHeaderColumnsTemp2.push(tableHeaderColumnsTemp3[index]);        }    }}function sortFirstRowHeaderColumns(firstRowTableHeaderToFrontSort,tableHeaderColumnsTemp,tableHeaderColumns) {for (var index in firstRowTableHeaderToFrontSort) {var sortHeader = firstRowTableHeaderToFrontSort[index];if (hasDirectHeader(sortHeader,tableHeaderColumnsTemp)) {tableHeaderColumns.push(sortHeader);} else if (hasSubHeaderContainingHeader(sortHeader,tableHeaderColumnsTemp)) {for (var j = 0,len = tableHeaderColumnsTemp.length; j <len; j++) {if (tableHeaderColumnsTemp[j].indexOf(sortHeader + ".") == 0) {tableHeaderColumns.push(tableHeaderColumnsTemp[j]);}}}}for (var index in tableHeaderColumnsTemp) {var header = tableHeaderColumnsTemp[index];var hasThisHeader = false;for (var inIndex in tableHeaderColumns) {if (tableHeaderColumns[inIndex] == header) {hasThisHeader = true;break;}}if (!hasThisHeader) {tableHeaderColumns.push(header);}}}function hasDirectHeader(field,tableHeaderColumns) {var has = false;for (var index in tableHeaderColumns) {if (tableHeaderColumns[index] == field) {has = true;break;}}return has;}function hasSubHeaderContainingHeader(field,tableHeaderColumns) {var has = false;for (var index in tableHeaderColumns) {if (tableHeaderColumns[index].indexOf(field + ".") == 0) {has = true;break;}}return has;}function getTableHeaderFieldsArray(key,value,tableHeaderColumns,excludeTableHeaderColumns) {if (value instanceof Array) {for(var i=0,len=value.length;i<len;i++) {var iterationValue = value[i];if (iterationValue instanceof Object) {for (var p in iterationValue) {getTableHeaderFieldsArray(key + "." + p,iterationValue[p],tableHeaderColumns,excludeTableHeaderColumns);}} else {if (!isExcludeTableHeaderColumn(excludeTableHeaderColumns,key)) {tableHeaderColumns.push(key);}}}} else if (value instanceof Object) {for(var p in value){getTableHeaderFieldsArray(key + "." + p,value[p],tableHeaderColumns,excludeTableHeaderColumns);}} else {if (!isExcludeTableHeaderColumn(excludeTableHeaderColumns,key)) {tableHeaderColumns.push(key);}}}function isExcludeTableHeaderColumn(excludeTableHeaderColumns,field) {var isExcludeTableHeaderColumn1 = false;for (var k = 0; k < excludeTableHeaderColumns.length; k++) {if (excludeTableHeaderColumns[k] == field) {isExcludeTableHeaderColumn1 = true;break;}}return isExcludeTableHeaderColumn1;}function getTableHeaderRowNum(tableHeaderColumns) {var tableHeaderRowNum = 1;for (var i = 0; i < tableHeaderColumns.length; i++) {if (tableHeaderColumns[i].indexOf(".") > 0) {var fields = tableHeaderColumns[i].split(".");if (fields.length > tableHeaderRowNum) {tableHeaderRowNum = fields.length;}}}return tableHeaderRowNum;}function createTable(tableHeaderColumns,_sourceJsonObjArray,excludeTableHeaderColumns) {if ($("#logTable").length > 0) {$("#logTable").remove();}if (_sourceJsonObjArray.length == 0) {alert("无结果");return;}//表格标题行行数var tableHeaderRowNum = getTableHeaderRowNum(tableHeaderColumns);//创建表格var table = $("<table id = \"logTable\" aligh=\"center\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">");table.appendTo($("#logTableDiv"));//创建表格标题recursionToCreateTableHeader(table,0,tableHeaderRowNum,tableHeaderColumns);//填充数据fillDataToTable(table,tableHeaderColumns,_sourceJsonObjArray,excludeTableHeaderColumns);$("#logTable").append("</table>");}function recursionToCreateTableHeader(table,i,tableHeaderRowNum,tableHeaderColumns) {var trHeader = $("<tr></tr>");trHeader.appendTo(table);var tableHeaderColumnsForSecondRow = [];var multiColumnHeaderArray = [];for (var j = 0; j < tableHeaderColumns.length; j++) {if (tableHeaderColumns[j].indexOf(".") < 0) {if (i == 0) {var td = $("<td aligh=\"center\" rowspan='" + (tableHeaderRowNum - i) + "'>" + tableHeaderColumns[j] + "</td>");td.appendTo(trHeader);}} else if (tableHeaderColumns[j].split(".").length > i) {var headersArray = tableHeaderColumns[j].split(".");var header = headersArray[i];if (tableHeaderColumns[j].split(".").length - i == 1) {var td = $("<td aligh=\"center\" rowspan='" + (tableHeaderRowNum - i) + "'>" + header + "</td>");td.appendTo(trHeader);continue;}var headerToCompare = "";for (var k = 0; k <= i; k++) {if (k == 0) {headerToCompare = headersArray[0];} else {headerToCompare = headerToCompare + "." + headersArray[k];}}var subHeadersNum = 0;for (var k = 0; k < tableHeaderColumns.length; k++) {if (tableHeaderColumns[k].indexOf(headerToCompare + ".") == 0) {subHeadersNum++;}}//tableHeaderColumnsForSecondRow.push(tableHeaderColumns[j].replace(header + ".",""));var has = false;if (multiColumnHeaderArray.length > 0) {var len = multiColumnHeaderArray.length;while (--len >= 0) {if (multiColumnHeaderArray[len] == headerToCompare) {has = true;break;}}}if (subHeadersNum > 1) {if (has) {continue;} else {var td = $("<td aligh=\"center\" colspan='" + subHeadersNum + "'>" + header + "</td>");td.appendTo(trHeader);multiColumnHeaderArray.push(headerToCompare);} } else {var td = $("<td aligh=\"center\">" + header + "</td>");td.appendTo(trHeader);}}}if (i <= tableHeaderRowNum) {recursionToCreateTableHeader(table,i+1,tableHeaderRowNum,tableHeaderColumns);}}function fillDataToTable(table,tableHeaderColumns,_sourceJsonObjArray,excludeTableHeaderColumns) {for (var i = 0; i < _sourceJsonObjArray.length; i++) {var thisObjHeaderFieldArray = [];var thisObjHeaderFieldAndValueArray = [];var _sourceJsonObj = _sourceJsonObjArray[i];for(var p in _sourceJsonObj){//遍历json对象的每个key/value对,p为keygetTableHeaderFieldsArray(p,_sourceJsonObj[p],thisObjHeaderFieldArray,excludeTableHeaderColumns);}for(var p in _sourceJsonObj){getTableHeaderFieldsAndValueArray(p,_sourceJsonObj[p],thisObjHeaderFieldAndValueArray,excludeTableHeaderColumns);}$.unique(thisObjHeaderFieldArray);//得到对象所占的表格最大行数var thisObjHeaderRepetableFields = [];for (var j=0,len=thisObjHeaderFieldAndValueArray.length;j<len;j++) {var obj = thisObjHeaderFieldAndValueArray[j];for (var key in obj) {thisObjHeaderRepetableFields.push(key);}}var fieldDataNumsObj={};for(var j=0,len=thisObjHeaderRepetableFields.length;j<len;j++){if(fieldDataNumsObj[thisObjHeaderRepetableFields[j]]){fieldDataNumsObj[thisObjHeaderRepetableFields[j]]++;} else{fieldDataNumsObj[thisObjHeaderRepetableFields[j]]=1;}}var thisObjTableRowNum = 0;for (var key in fieldDataNumsObj) {var num = fieldDataNumsObj[key];if (num > thisObjTableRowNum) {thisObjTableRowNum = num;}}recursionToFillSingleObjDataToTable(0,table,tableHeaderColumns,thisObjHeaderFieldArray,thisObjHeaderFieldAndValueArray,thisObjTableRowNum,fieldDataNumsObj);}}function getTableHeaderFieldsAndValueArray(key,value,thisObjHeaderFieldAndValueArray,excludeTableHeaderColumns) {if (value instanceof Array) {for(var i = 0, l = value.length; i < l; i++) {var iterationValue = value[i];if (iterationValue instanceof Object) {for (var p in iterationValue) {getTableHeaderFieldsAndValueArray(key + "." + p,iterationValue[p],thisObjHeaderFieldAndValueArray,excludeTableHeaderColumns);}} else {if (!isExcludeTableHeaderColumn(excludeTableHeaderColumns,key)) {var obj = {};obj[key] = iterationValue;thisObjHeaderFieldAndValueArray.push(obj);}}}} else if (value instanceof Object) {for(var p in value){//遍历json对象的每个key/value对,p为keygetTableHeaderFieldsAndValueArray(key + "." + p,value[p],thisObjHeaderFieldAndValueArray,excludeTableHeaderColumns);}} else {  if (!isExcludeTableHeaderColumn(excludeTableHeaderColumns,key)) {var obj = {};obj[key] = value;thisObjHeaderFieldAndValueArray.push(obj);}}}function recursionToFillSingleObjDataToTable(count,table,tableHeaderColumns,thisObjHeaderFieldArray,thisObjHeaderFieldAndValueArray,thisObjTableRowNum,fieldDataNumsObj) {var trHeader = $("<tr></tr>");trHeader.appendTo(table);var subTableHeaderColumns = [];var subThisObjHeaderFieldAndValueArray = [];//填充数据for (var i = 0; i < tableHeaderColumns.length; i++) {var header = tableHeaderColumns[i];var containThisHeader = false;for (var j = 0; j < thisObjHeaderFieldArray.length; j++) {var thisObjHeader = thisObjHeaderFieldArray[j];if (thisObjHeader == header) {containThisHeader = true;var thisObjHeaderAndValueObj;for (var k = 0; k < thisObjHeaderFieldAndValueArray.length; k++) {thisObjHeaderAndValueObj = thisObjHeaderFieldAndValueArray[k];if (thisObjHeaderAndValueObj[thisObjHeader] != undefined) {var thisObjHeaderValue = thisObjHeaderAndValueObj[thisObjHeader];var fieldDataNum = fieldDataNumsObj[thisObjHeader];thisObjHeaderFieldAndValueArray[k] = ""; var rowSpan;if (fieldDataNum > 1) {rowSpan = 1;subTableHeaderColumns.push(thisObjHeader);} else if (fieldDataNum == 1) {rowSpan = thisObjTableRowNum - count;}var td = $("<td aligh=\"center\" rowspan='" + rowSpan + "'>" + thisObjHeaderValue + "</td>");td.appendTo(trHeader);fieldDataNumsObj[thisObjHeader] = fieldDataNum - 1;break;}}break;  }}if (containThisHeader == false) {var td = $("<td aligh=\"center\" rowspan='" + thisObjTableRowNum + "'></td>");td.appendTo(trHeader);}}if (count < thisObjTableRowNum) {recursionToFillSingleObjDataToTable(count + 1,table,subTableHeaderColumns,thisObjHeaderFieldArray,thisObjHeaderFieldAndValueArray,thisObjTableRowNum,fieldDataNumsObj)}}

4.代码说明：(1)如果要亲测的话，除了该js文件，还需要一个引用该js文件html文件，需要在html文件里引入jQuery相关文件；(2).把处理数据的代码写在error回调函数里，是为了方便测试，只要有浏览器就可以测试，ajax的请求url可以随便写，报错了就直接进入到error回调函数里，在error回调函数里写死数据，在这里可以向数组中添加任意深度的json对象，不必每个json对象的key都是一样。

5.生成表格结果如下：