html用于创建对象,从JavaScript对象创建HTML表

说明

您想要的是用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";

解

HTML

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

";

/* 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 += "

" + obj[i].key + "" + "$" + obj[i].value.toString() + "";

/* We add the table row to the table body */

tbody.innerHTML += tr;

}