使用 Javascript 数组和对象创建表

Question

我有一个数组和一个对象：

labels = ['ID','Name']; 
object = {
    ["id": "1", 'name': "richard"],
    ["id": "2", 'name': "santos"]
};

我必须创建一个这样的表：

<table>
<thead>
    <tr>
        <td>ID</td>
        <td>Name</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Richard</td>
        <td>Santos</td>
    </tr>
</tbody>

问题是：
“对象”变量有时可能具有不同的键名，因此我必须使用其他对象动态创建此表，我整天都在尝试这样做但没有成功，有人可以帮我吗？我是 Javascript 的新手。 obs：标签和对象变量始终具有相同的大小。

某种物体。

var labels = ['ID','NOME'];
var object = {
    ["id": "1", 'nome': "richard"],
    ["id": "2", 'nome': "adriana"]
};

var labels = ['ID','NAME', 'PLATE'];
var object = {
    ["id": "1", 'nome': "jetta",  'plate': "DFG-1222"],
    ["id": "2", 'nome': "fusion", 'plate': "DFF-3342"]
};

Answer 1

首先有两个问题：

1. 那是 Name 还是 Nome？请修正您的拼写错误（我知道 Nome 是法语，所以如果不是拼写错误，我建议您介绍一个 i18n 解决方案）。
2. 另外请注意您的语法错误（有些提供了您可以考虑的建议修改）。

之后，这是我基于输入数据以编程方式创建表的方法：

function buildTable(labels, objects, container) {
  var table = document.createElement('table');
  var thead = document.createElement('thead');
  var tbody = document.createElement('tbody');

  var theadTr = document.createElement('tr');
  for (var i = 0; i < labels.length; i++) {
    var theadTh = document.createElement('th');
    theadTh.innerHTML = labels[i];
    theadTr.appendChild(theadTh);
  }
  thead.appendChild(theadTr);
  table.appendChild(thead);

  for (j = 0; j < objects.length; j++) {
    var tbodyTr = document.createElement('tr');
    for (k = 0; k < labels.length; k++) {
      var tbodyTd = document.createElement('td');
      tbodyTd.innerHTML = objects[j][labels[k].toLowerCase()];
      tbodyTr.appendChild(tbodyTd);
    }
    tbody.appendChild(tbodyTr);
  }
  table.appendChild(tbody);

  container.appendChild(table);
}

var labels1 = ['ID', 'Name']; 
var objects1 = [
  {"id": "1", 'name': "richard"},
  {"id": "2", 'name': "santos"}
];

var labels2 = ['ID', 'NOME'];
var objects2 = [
  {"id": "1", 'nome': "richard"},
  {"id": "2", 'nome': "adriana"}
];

var labels3 = ['ID', 'NAME', 'PLATE'];
var objects3 = [
  {"id": "1", 'name': "jetta",  'plate': "DFG-1222"},
  {"id": "2", 'name': "fusion", 'plate': "DFF-3342"}
];

buildTable(labels1, objects1, document.getElementById('a'));
buildTable(labels2, objects2, document.getElementById('b'));
buildTable(labels3, objects3, document.getElementById('c'));

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
}

<div id="a"><p>Table 1</p></div>
<div id="b"><p>Table 2</p></div>
<div id="c"><p>Table 3</p></div>

Answer 2

这是我们项目中的一个工作程序。它有三个参数：

htmlTable(selector, data_array [, column_names]);

column_names 参数是可选的：如果省略它，函数会从第一行（如果存在）创建列名。

它直接在 DOM 中创建 HTML 标记，但如果需要，可以重写它以将 HTML 生成为字符串。请参阅下面的工作 sn-p：

var labels = ['id','name']; 
var object = [{"id":"1",'name': "richard"},{"id":"2",'name': "santos"}];
htmlTable("#res0",object, labels);

var labels = ['id','nome']; 
var object = [{"id":"1",'nome': "richard"},{"id":"2",'nome': "adriana"}];
htmlTable("#res1",object, labels);

var labels = ['id','name', 'plate']; 
var object = [{"id":"1",'name': "jetta",'plate': "DFG-1222"},
              {"id":"2",'name': "fusion",'plate': "DFF-3342"}];
htmlTable("#res2",object, labels);

// Without labels array
var data3 = [{a:1,c:2},{a:3,c:3}];
htmlTable("#res3",data3);

function htmlTable(selector, data, columns) {
	var sel = document.querySelector(selector);
	if(!sel) {
		throw new Error('Selected HTML element is not found');
	};	

	if((!columns) || columns.length == 0) {
        columns = Object.keys(data[0]);
	}

	var tbe = document.createElement('table');
	var thead = document.createElement('thead');
	tbe.appendChild(thead);

  var tre = document.createElement('tr');
  for(var i=0;i<columns.length;i++){
    var the = document.createElement('th');
    the.textContent = columns[i];
    tre.appendChild(the);
  }
  thead.appendChild(tre);

	var tbody = document.createElement('tbody');
	tbe.appendChild(tbody);
	for(var j=0;j<data.length;j++){
		var tre = document.createElement('tr');
		for(var i=0;i<columns.length;i++){
			var the = document.createElement('td');
			the.textContent = data[j][columns[i]];
			tre.appendChild(the);
		}
		tbody.appendChild(tre);
	};
	emptyDOMChildren(sel);
	sel.appendChild(tbe);
};

// Utility function to fast delete all children of element if it is not empty
// Can be replaced with simple but relatively "slower" container.innerHTML = "";
function emptyDOMChildren (container){
  var len = container.childNodes.length;
  while (len--) {
    container.removeChild(container.lastChild);
  };
};

<div id="res0"></div>
<div id="res1"></div>
<div id="res2"></div>
<div id="res3"></div>

Answer 3

<div id="test"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script   src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
arr1 = [
{"Name":"Peter","RollNo" : 1234,},
{"Name":"John","RollNo" : 1234,},
{"Name":"Kevin","RollNo" : 1234,},
];

$.each(arr1, function(i){
   var templateString = '<table class="table card"><thead> <tr><td><p>My name is: '+arr1[i].Name+'</p><p>My RollNo is: '+arr1[i].RollNo+'</p></td></tr></thead></table>';
$('#test').append(templateString);
})
 </script>

Answer 4

这是对@Kaushar*s 答案的改进，带有一个带有标题的 html 表格。这是一个使用纯数组，没有对象的快速且有效的解决方案。

ags = [
  ['proj', 'Duales Studium zum Master of Science Wirtschaftsinformatik'],
  ['Kess', 'Systemadministrator Linux'],
  ['foo', 'Customer Success Engineer (EMEA)'],
]

templateString = '<table class=table><tr><th>Firma</th><th>Job</th><th>Status</th><th>Datum</th></tr>'
$.each(ags, function (i) {
  templateString += '<tr><td>' + ags[i][0] + '</td><td>' + ags[i][1] + '</td><td>Status</td><td>Datum</td></tr>'
})
templateString += '</table>'
$('#fa').append(templateString)

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
      <div id="fa"></div>

Answer 5

在 SO 中有几个类似的问题，任何很多答案都是针对特定案例量身定制的。然而，通过使用本机 JS Template Literals，您可以轻松地提出自己的模板抽象。也许您将来甚至可以放弃将模板引擎库用于此类工作。

以下代码是纯JS。让我们从正确的数据开始。

var data = { labels: ['ID','Name']
           , rows  : [ {"id": "1", 'name': "richard"}
                     , {"id": "2", 'name': "santos"}
                     ]
           };

现在让我们定义一个 tableTemplate 函数，它接受 data 并给我们一个 html 表格。

function tableTemplate(data){
  return `
    <table>
      <tr> ${data.labels.map(label => html`
             <th>$${label}</th>`).join("")}
      </tr>${data.rows.map(row => html`
      <tr>
             <td>$${row.id}</td>
             <td>$${row.name}</td>
      </tr>`).join("")}
    </table>`;
}

那么这个html` 和那个$$ 是什么？

• 首先，html` 只是一个通用的tag function，我们只定义一次，无需修改它，我们可以将它用于所有模板函数。
• 另一方面，$$ 很简单。第一个$ 只是一个简单的字符串字符，第二个是用于模板字符串中变量的转义$ 字符，例如${x}。我们可以使用标签函数通过转义无效的 html 字符来验证我们的 html 代码，例如 &、>、<、"、' 或 `。我在下面给出的版本看起来有点复杂，但它非常简单且非常有用。它基本上会转义无效的 html 字符并提供模板字符串的“原始”版本。

请点击以上链接了解更多信息。在这里；

function html(lits,...vars){
  var esc = { "&": "&"
            , ">": ">"
            , "<": "&lt;"
            , '"': "&quot;"
            , "'": "&#39;"
            , "`": "&#96;"
            };
  return lits.raw
             .reduce( (res,lit,i) => (res += lit.endsWith("$") ? lit.slice(0,-1) + [...vars[i].toString()].reduce((s,c) => s += esc[c] || c, "")
                                                               : lit + (vars[i] || ""))
                    , ""
                    );
                                                 
}

现在，是时候将所有内容放在一起制作一个工作示例了。这次我们还要添加<thead> 和<tbody> 标签和一些CSS。

function html(lits,...vars){
  var esc = { "&": "&"
            , ">": ">"
            , "<": "&lt;"
            , '"': "&quot;"
            , "'": "&#39;"
            , "`": "&#96;"
            };
  return lits.raw
             .reduce( (res,lit,i) => (res += lit.endsWith("$") ? lit.slice(0,-1) + [...vars[i].toString()].reduce((s,c) => s += esc[c] || c, "")
                                                               : lit + (vars[i] || ""))
                    , ""
                    );
                                                 
}

function tableTemplate(data){
  return `
    <table>
      <thead>
        <tr>${data.labels.map(label => html`
               <th>$${label}</th>`).join("")}
        </tr>
      </thead>
      <tbody>${data.rows.map(row => html`
        <tr>
               <td>$${row.id}</td>
               <td>$${row.name}</td>
        </tr>`).join("")}
      </tbody>
    </table>`;
}

var data = { labels: ['ID','Name']
           , rows  : [ {"id": 1, 'name': "richard"}
                     , {"id": 2, 'name': "santos"}
                     , {"id": 3, 'name': "<ömer & 'x'>"}
                     ]
           };
document.write(tableTemplate(data));

table {
  background-color: LightPink;
  border          : 0.2em solid #00493E;
  border-radius   : 0.4em;
  padding         : 0.2em
  }
thead {
  background-color: #00493E;
  color           : #E6FFB6
  }
tbody {
  background-color: #E6FFB6;
  color           : #00493E
  }

显然，您现在可以在 tableTemplate 函数中将 <syle> 标记或 class="whatever" 属性插入到您的准 HTML 模板文字中，就像您通常在 HTML 文本文件中所做的那样。

另外请注意，如果您 console.log 生成的 html 文本字符串，由于原始转换，它会漂亮地显示（根据您在 tableTemplate 函数中的缩进），如下所示...

<table>
  <thead>
    <tr>
           <th>ID</th>
           <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
           <td>1</td>
           <td>richard</td>
    </tr>
    <tr>
           <td>2</td>
           <td>santos</td>
    </tr>
    <tr>
           <td>317</td>
           <td>&lt;ömer &amp; &#39;x&#39;&gt;</td>
    </tr>
  </tbody>
</table>