javascript - 使用 Javascript 对象作为数据源合并两个 HTML 表格？

Question

我将有多个数组数组，我想从数组中创建对象，然后将其合并到一个表中。我已经这样做了，但是我需要帮助使用该对象来制作一张更大的 table 吗？

如果键存在于一个对象中但不存在于其他对象中，则该键不存在的对象的值可以为空。我可以制作多个不同的表格，但如何合并它们以使表格更大？

var data  =[["default_PROJECT","Allow","Connect","Allow","AddComment","Allow","Write",
"Allow","ViewComments","Allow","ExportData","Allow","ExportImage","Allow","ViewUnderlyingData","Allow","Read","Allow","ShareView","Allow","Filter"],
["Allow","ExportImage","Allow","Write","Allow","ViewComments",
"Allow","ShareView","Allow","Filter","Allow","ExportData","Allow","Connect","Allow",
"Read","Allow","ViewUnderlyingData","Allow","AddComment","Allow","ViewComments","Deny","ExportData","Allow",
"AddComment","Deny","Write","Allow","Read","Deny","ExportXml","Deny","ShareView","Allow","Connect","Allow","ChangeHierarchy","Allow",
"WebAuthoring","Deny","ViewUnderlyingData","Deny","Filter","Deny","ExportImage"]];
  			 var result = [];
		 for(var i = 0, len = data.length; i < len; i++) {
		   var list = data[i];
		   
		   result[i] = { name: list[0] };

		  for (var j = list.length - 1; j >= 1; j = j - 2) {
		     var key = list[j];
		     var value = list[j - 1];
		     if( result[i][key] !== "Deny" ) {
		         result[i][key] = value;
		     }
		 }
		 }
		 console.log(result);
		 var resultElement = document.getElementById('result1');
		 var tpl = '';
		 for(var t = 0, tLen = result.length; t < tLen; t++) {
		   var item = result[t];
		   
		   tpl+= '<table align=center style="width:25%;">' +
		     '<thead>' +
		       '<tr><td colspan="2">Project: ' + item.name + '</td></tr>' +
		       '<tr><th>Permission</th><th>Value</th></tr>' +
		       '</thead>' +
		     '<tbody>'
		   ;
		   
		   for(var key in item) {
		     if(!item.hasOwnProperty(key) || key === 'name') { continue; }
		     if(item[key] == "Allow"){
			     tpl += '<tr style="background-color:greenyellow;"><td>'+ key +'</td><td>'+ item[key] +'</td></tr>';   
		     }
		     else{
			     tpl += '<tr style="background-color:red;"><td>'+ key +'</td><td>'+ item[key] +'</td></tr>';   
		     }
		   }
		 }
		 resultElement.innerHTML = tpl;

table { text-align: left; width: 100%; margin-bottom: 50px; border-collapse: collapse;}
td, th { width: 50%; border: 1px solid black; line-height: 1; padding:2px 10px;}
[colspan="2"] { color: blue; font-weight: bolder;text-transform: uppercase; text-align: center;}

<div id="result1"></div>

---

http://jsfiddle.net/h2s17hac/

Answer 1

这将合并两个表。

Fiddle

var data  =[["default_PROJECT","Allow","Connect","Allow","AddComment","Allow","Write",
"Allow","ViewComments","Allow","ExportData","Allow","ExportImage","Allow","ViewUnderlyingData","Allow","Read","Allow","ShareView","Allow","Filter"],
["test_PROJECT", "Allow","ExportImage","Allow","Write","Allow","ViewComments",
"Allow","ShareView","Allow","Filter","Allow","ExportData","Allow","Connect","Allow",
"Read","Allow","ViewUnderlyingData","Allow","AddComment","Allow","ViewComments","Deny","ExportData","Allow",
"AddComment","Deny","Write","Allow","Read","Deny","ExportXml","Deny","ShareView","Allow","Connect","Allow","ChangeHierarchy","Allow",
"WebAuthoring","Deny","ViewUnderlyingData","Deny","Filter","Deny","ExportImage"]];

function makeObjects(data){
   			 result = [];
    		 for(var i = 0, len = data.length; i < len; i++) {
			   var list = data[i];
			   result[i] = { Name: list[0] };
			  for (var j = list.length - 1; j >= 1; j = j - 2) {
			     var key = list[j];
			     var value = list[j - 1];
			     if( result[i][key] !== "Deny" ) {
			         result[i][key] = value;
			     }
			 }
		}
    return result;
}

function sortObject(obj) {
    return Object.keys(obj).sort().reduce(function (result, key) {
        result[key] = obj[key];
        return result;
    }, {});
}

function getKeys(data){
    var keys = [];
   for(i=0; i<data.length; i++){
       key = Object.keys(data[i]);
      for(j =0; j<key.length; j++){
          if(keys.indexOf(key[j]) == -1){
           keys.push(key[j]);   
          }
       }
   }
    return keys;
}

function addMissingKeys(keys, data){
    var filtData = [];
    for(i=0; i<data.length; i++){
        for(j=0; j<keys.length; j++){
         if(data[i][keys[j]] == undefined){
          data[i][keys[j]] = "";  
         }
        }
    }
    for(num=0; num<data.length; num++){
        filtData.push(sortObject(data[num]));
    }
	return filtData;
}

var dataa = makeObjects(data);
var keys = getKeys(dataa);
var filtData = addMissingKeys(keys, dataa);
console.log(filtData);
			 var resultElement = document.getElementById('result1');
			 var tpl = '<table align=center style="width:75%;">';
			 for(var t = 0, tLen = filtData.length; t < tLen; t++) {
			   var item = filtData[t];
                 
			   tpl+= '<tr><td>' + item.Name + '</td>';
			   
			   for(var key in item) {
			     if(!item.hasOwnProperty(key) || key === 'Name') { continue; }
                   if(item[key] != "") {
                     if(item[key] == "Allow"){
                         tpl += '<td style="background-color:greenyellow;">'+ key +':<br>'+ item[key] +'</td>';   
                     }
                     else{
                         tpl += '<td style="background-color:red;">'+ key +':<br>'+ item[key] +'</td>';   
                     }
                   } else {
                   		tpl += '<td></td>';
                   }
                 
			   }
               tpl += '</tr>';
			 }
             tpl += '</table>';
			 resultElement.innerHTML = tpl;

table { text-align: left; width: 100%; margin-bottom: 50px; border-collapse: collapse;}
td, th { width: 50%; border: 1px solid black; line-height: 1; padding:2px 10px;}
[colspan="2"] { color: blue; font-weight: bolder;text-transform: uppercase; text-align: center;}

<div id="result1"></div>
<div id="test"></div>