在动态表javascript中显示对象数组[重复]

Posted 2023-03-05

【中文标题】在动态表javascript中显示对象数组[重复]

【英文标题】：display array of objects in a dynamic table javascript [duplicate]

【发布时间】：2015-06-02 19:53:10

【问题描述】：

我想使用 javascript 在动态表中显示一组对象。

var rows=[ name : "John", age:20, email: "[e-mail]",
     name : "Jack", age:50, email: "[e-mail]",
     name : "Son", age:45, email: "[e-mail]"
........................etc
   ];

这就是它的外观。我想知道如何将其显示为动态表格。

【问题讨论】：

好吧，您遍历数组并创建相应的 DOM 元素。或者您使用模板引擎。你有什么特别的问题吗？

你到底卡在哪里了？如果您对它一无所知，请阅读一些基本的 DOM 操作教程。

问题是，我有一个 html 页面，其中包含输入列名称、年龄和电子邮件。我希望这些项目在那里显示..

我们了解问题所在。你试过什么？你到底卡在哪里了？

您可能想从这里开始：MDN Learn JavaScript

【参考方案1】：

这就是你的做法：

Javascript 解决方案：

FIDDLE:

var rows = [
    name: "John",
    age: 20,
    email: "[e-mail]"
, 
    name: "Jack",
    age: 50,
    email: "[e-mail]"
, 
    name: "Son",
    age: 45,
    email: "[e-mail]"
];

var html = "<table border='1|1'>";
for (var i = 0; i < rows.length; i++) 
    html+="<tr>";
    html+="<td>"+rows[i].name+"</td>";
    html+="<td>"+rows[i].age+"</td>";
    html+="<td>"+rows[i].email+"</td>";
    
    html+="</tr>";


html+="</table>";
document.getElementById("box").innerHTML = html;

jQuery 解决方案：

FIDDLE

var rows = [
        name: "John",
        age: 20,
        email: "[e-mail]"
    , 
        name: "Jack",
        age: 50,
        email: "[e-mail]"
    , 
        name: "Son",
        age: 45,
        email: "[e-mail]"
    ];

$(document).ready(function () 
    var html = "<table border='1|1'>";
    for (var i = 0; i < rows.length; i++) 
        html+="<tr>";
        html+="<td>"+rows[i].name+"</td>";
        html+="<td>"+rows[i].age+"</td>";
        html+="<td>"+rows[i].email+"</td>";
        
        html+="</tr>";

    
    html+="</table>";
    $("div").html(html);
);

jQuery 解决方案 2：

FIDDLE

var rows = [
  name: "John",
  age: 20,
  email: "[e-mail]"
, 
  name: "Jack",
  age: 50,
  email: "[e-mail]"
, 
  name: "Son",
  age: 45,
  email: "[e-mail]"
];

const Array2Table = (arr) => 
  let Table = [];
  let top_row = [];
  let rows = [];

  for (let i = 0; i < arr.length; i++) 
    let cells = [];

    for (let property in arr[i]) 
      if (top_row.length < Object.keys(arr[i]).length) 
        top_row.push(`<th scope="col">$property</th>`);
      
      if (arr[i][property] === null) 
        cells.push(`<td>$null</td>`);
       else 
        cells.push(`<td>$arr[i][property]</td>`);
      
    

    rows.push(`<tr>$cells.join("")</tr>`);
  

  Table.push(`<table class="table card-table table-striped">`);
  Table.push(`<thead>$top_row.join("")</thead>`);
  Table.push(`<tbody>$rows.join("")<tbody>`);
  Table.push("</table>");
  return Table.join("");


$(function() 
  let html = Array2Table(rows);
  $("div").html(html);
);

【讨论】：

我没有看到任何迹象表明 jQuery 正在（或应该）被使用。这么简单的情况，为什么要这么轻描淡写？

@squint 谢谢，我更新了我的答案。

抱歉挖掘了一个老话题，但是您如何将 JavaScript 方法合并到从 html modal 调用的函数中？