使用Javascript数组和对象创建表格

Question

使用Javascript数组和对象创建表格

3

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

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>

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

某些类型的对象。

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"]
};

- Richard Feliciano

1

http://jsfiddle.net/Ly8mkbbx/ - bowheart

1

数据结构不会起作用；(a) 如所写，object 将抛出语法错误。(b) 对象是无序的。 - Roamer-1888

1

（OT）Richard，我刚刚编辑了你的问题 - 以后请使用正确的撇号字符 '而不是 `-后者用于包含代码段。例如，用反引号括起来`：这是代码。您的键盘上有三个不同的单引号字符 - 但它们都非常不同：一个用于组合重音符号，一个用于撇号和单引号，一个是反引号 - 最后一个在这里具有特殊的格式化含义。 - Mörre

4

请不要修复人们问题中的代码错误。那是一个答案。错误就是人们提出问题的原因 - 修改问题有什么意义，而不是给出答案呢？在答案中展示正确的代码，把错误留在问题里。以我个人看来，如果你编辑掉错误，人们会想知道为什么曾经会有问题。 - Mörre

1

@Richard Feliciano - 如果这个答案对您有帮助，您可以在答案左侧勾选打钩标记来接受它。如果这个答案对您有所帮助并且您尊重他人的时间 :)，您可以通过点击问题旁边朝上的三角形来为答案点赞。 - amesh

显示剩余5条评论

5个回答

4

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

htmlTable(selector, data_array [, column_names]);

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

它直接创建HTML标签到DOM中，但如果需要，可以重写为生成HTML字符串。请见下面的工作示例:

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>

- agershun

2

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

- Kaushar Alam

0

在SO中有几个类似的问题和许多答案，这些答案大多针对特定情况进行了定制。但是，通过使用本地JS 模板文字，您可以轻松地想出自己的模板抽象。也许您甚至可以放弃将来使用模板引擎库来完成这样的工作。

以下代码是纯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` 只是一个通用的标签函数，我们只需要定义一次，而不需要修改它，就可以在所有的模板函数中使用它。
另一方面，$$ 很简单。第一个 $ 只是一个简单的字符串字符，而第二个则是模板字符串中变量的转义字符，例如 ${x}。我们可以使用标签函数来验证我们的 HTML 代码，通过转义无效的 HTML 字符，如 &、>、<、"、' 或 `。下面给出的版本看起来有点复杂，但实际上非常简单且非常有用。它基本上转义了无效的 HTML 字符，并提供了模板字符串的“原始”版本。

请点击上面的链接获取更多信息。以下是内容：

function html(lits,...vars){
  var esc = { "&": "&amp;"
            , ">": "&gt;"
            , "<": "&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 = { "&": "&amp;"
            , ">": "&gt;"
            , "<": "&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
  }

显然，您现在可以像在HTML文本文件中一样，在tableTemplate函数的准HTML模板文字中插入<style>标签或class="whatever"属性。

另请注意，如果您将结果html文本字符串console.log出来，由于原始转换的原因，它会像下面这样美观地显示（根据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>

- Redu

0

这里是对@Kaushar答案的改进，使用带有标题的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>

- Timo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Leo · Accepted Answer

首先需要解决两个问题：

是Name还是Nome？请纠正你的拼写错误（我知道Nome是法语，如果这不是打字错误，建议你引入i18n解决方案）。
同时，请注意你的语法错误（有些人已经给出了建议的编辑，你可以考虑）。

在解决以上问题后，以下是我的方法来根据输入数据编程创建表格：

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>