从JavaScript对象创建HTML表

Question

我是JavaScript的初学者,想要在HTML中显示一个对象数组.

数据的格式如下:

[
  {"key":"apple","value":1.90},
  {"key":"berry","value":1.7},
  {"key":"banana","value":1.5},
  {"key":"cherry","value":1.2}
]

我想使用一个包含三列(id,name,relevant)的列表来显示它们.并且id可以自动从1增加.

谁能告诉我如何编写一个javascript代码来显示它？

请给我一些材料或例子来学习.

Answer 1

说明

你想要的是用你的JavaScript填充HTML表格(或另一个DOMElement),一旦加载页面并收到你的JSON对象,它就会动态执行.

你想循环通过对象.这样做的最好方法是使用for循环,并确保循环变量对于对象的长度(所有属性)保持有效.

获取JSON对象长度的最佳方法是myJSONObject.length:选择myJSONObject的键并返回它们的计数.

您可以在for循环中以下列方式访问存储在JSON对象中的值(假设定义的循环变量已命名i):myJSONObject[i].theAttributeIWantToGet

价格格式细分

现在,那些价格需要有适当的格式,不是吗？因此,我们将检查其中的任何value属性是否包含少于2个字符..如果他们这样做,我们添加另一个小数0.我们还在$写入格式化值之前添加了一个.以下是其工作原理的细分:

• obj[i].value.toString().substring(startIndex, length)

  • 我们想检查.符号后面的长度,所以我们的startIndex将是我们字符串中这个点的位置.
  • obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'),length)
  • 我们现在需要设置长度.我们想找到点之后的所有内容的长度,所以我们将整个字符串的长度放在一起是为了安全.

  • 最后结果: obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2

    • 这将返回true或false.如果是真的:点后面的数字少于2位!

  • 我们添加if语句和最后的零:

  • if (obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2) obj[i].value += "0";

另外: 为什么我用innerHTML而不是appendChild().

解

的jsfiddle

HTML

<table>
    <tbody id="tbody"></tbody>
</table>

JSON

[{
    "key": "apple",
    "value": 1.90
}, {
    "key": "berry",
    "value": 1.7
}, {
    "key": "banana",
    "value": 1.5
}, {
    "key": "cherry",
    "value": 1.2
}]

JavaScript的

注意: JSON对象将obj在此实例中命名.

var tbody = document.getElementById('tbody');

for (var i = 0; i < obj.length; i++) {
    var tr = "<tr>";

    /* Verification to add the last decimal 0 */
    if (obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2) 
        obj[i].value += "0";

    /* Must not forget the $ sign */
    tr += "<td>" + obj[i].key + "</td>" + "<td>$" + obj[i].value.toString() + "</td></tr>";

    /* We add the table row to the table body */
    tbody.innerHTML += tr;
}

的jsfiddle

Answer 2

你可以这样做：

var table = document.createElement("table");

//Add a header
var header = document.createElement("tr");

var idHeaderCell = document.createElement("th");
var nameHeaderCell = document.createElement("th");
var relevanceHeaderCell = document.createElement("th");

header.appendChild(idHeaderCell);
header.appendChild(nameHeaderCell);
header.appendChild(relevanceHeaderCell);

table.appendChild(header);

//Add the rest of the data to the table
for(var i = 0; i < data.length; i++) {
    var id = (i + 1);
    var name = data[i].key;
    var relevance = data[i].value;

    var tr = document.createElement("tr");

    var idCell = document.createElement("td");
    var nameCell = document.createElement("td");
    var relevanceCell = document.createElement("td");

    idCell.appendChild(document.createTextNode(id));
    nameCell.appendChild(document.createTextNode(name));
    relevanceCell.appendChild(document.createTextNode(relevance));

    tr.appendChild(idCell);
    tr.appendChild(nameCell);
    tr.appendChild(relevanceCell);

    table.appendChild(tr);
}

Answer 3

它可以通过一个小巧的过程简单地完成：

<table cellpadding="2" cellspacing="2" border="0" bgcolor="#dfdfdf" width="40%" align="center">
<thead>
    <tr>
        <th>Name</th>
        <th width="20%">Age</th>
        <th width="12%">Status</th>
    </tr>
</thead>
    <tbody id="tableData"></tbody>
</table>
<script type="text/javascript">
    var mainObj = [
        {
            name: "Kapil",
            age:  21,
            status: "Active"
        },
        {
            name: "John",
            age:  28,
            status: "Inactive"
        },
        {
            name: "Deos",
            age:  18,
            status: "Active"
        }
    ];
    var k = '<tbody>'
    for(i = 0;i < mainObj.length; i++){
        k+= '<tr>';
        k+= '<td>' + mainObj[i].name + '</td>';
        k+= '<td>' + mainObj[i].age + '</td>';
        k+= '<td>' + mainObj[i].status + '</td>';
        k+= '</tr>';
    }
    k+='</tbody>';
    document.getElementById('tableData').innerHTML = k;
    </script>