// Этот код был протестирован в IE9, Firefox, Chorme и Safair и не показал проблем.
Рендеринги следующие:
Вот код:
Кода -копия выглядит следующим образом:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<Title> преобразовать массив JSON в таблицу </title>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<стиль типа = "text/css">
подпись {
Заполнение: 0 0 5px 0;
Ширина: 450px;
Шрифт: курсив 11px "Trebuchet MS", Verdana, Arial, Helvetica, Sans-Serif;
Текст-альбом: верно;
}
td {
Граница: 1PX SOLID #C1DAD7;
Подкладка: 6px 6px 6px 12px;
Цвет: #4F6B72;
Текст-альбом: Центр;
Ширина: 150px;
}
</style>
<script type = "text/javascript">
var data = [{name: 'Xiaoxiao', возраст: 12, пол: 'male'}, {name: 'xiao', возраст: 22, пол: 'male'}, {name: 'hh', возраст: 12 , Пол: «Женщина»}, {name: 'ran', возраст: 20, пол: «женщина»}];
// Событие Onload выполняется после загрузки веб -страницы.
OnLoad = function () {
var body = document.getelementsbytagname ('body') [0];
body.appendchild (Createletable (data));
};
// Создать таблицу на основе пропущенного массива JSON
var createletable = function (data) {
// Определите таблицу
var table = document.createElement ('table');
table.setattribute ('style', 'ширина: 450px;');
// Определите заголовок таблицы
var poption = document.createElement ('Подпись');
poption.innerhtml = 'Информационная таблица студентов';
// Добавить заголовок в таблицу
Table.appendChild (заголовок);
// Вызовите метод CreateTret () для создания строки заголовка и добавить ее в таблицу.
table.appendchild (createret ('name', 'age', 'gender'));
table.childnodes [1] .setattribute ('style', 'founal:#cae8ea;');
//alert(table.firstchild);
// для объекта цикла JSON, затем объект петли генерируется методом COMERICETR () и добавляется в таблицу
для (var i = 0; i <data.length; i ++) {
table.appendchild (createret (data [i] .name, data [i] .age, data [i] .gender));
}
возвратный таблица;
};
// Как генерировать строки в таблице на основе переменных, отправленных пользователем
var createTret = function (имя, возраст, пол) {
// определить метку элемента строки
var tr = document.createElement ('tr');
// Определите метку элемента столбца
var tdname = document.createElement ('td');
// Установить значение текстового узла узла столбца
tdname.innerhtml = name;
var tdage = document.createElement ('td');
tdage.innerhtml = возраст;
var tdgender = document.createElement ('td');
tdgender.appendchild (document.createtextnode (пол)); // эквивалент tdgender.innerhtml = пол;
// Добавить значение столбца к узлу элемента строки
tr.appendchild (tdname);
tr.appendchild (tdage);
tr.appendchild (tdgender);
// Возврат сгенерированной метки строки
вернуть TR;
};
</script>
</head>
<тело>
</body>
</html>