//이 코드는 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">
<스타일 유형 = "텍스트/CSS">
캡션 {
패딩 : 0 0 5px 0;
너비 : 450px;
글꼴 : 이탈리아 11px "Trebuchet MS", Verdana, Arial, Helvetica, Sans-Serif;
텍스트 정렬 : 맞습니다.
}
TD {
국경 : 1px 고체 #c1dad7;
패딩 : 6px 6px 6px 12px;
색상 : #4F6B72;
텍스트 정렬 : 센터;
너비 : 150px;
}
</스타일>
<script type = "text/javaScript">
var data = [{name : 'xiaoxiao', age : 12, gender : 'male'}, {name : 'xiao', age : 22, gender : 'male'}, {name : 'hh', age : 12 , 성별 : '여성'}, {이름 : 'ran', 나이 : 20, 성별 : '여성'}];
// 웹 페이지가로드 된 후에 온로드 이벤트가 실행됩니다.
onload = function () {
var body = document.getElementsByTagName ( 'body') [0];
Body.appendChild (CreateTable (데이터));
};
// 전달 된 JSON 배열을 기반으로 테이블을 만듭니다
var createtable = function (data) {
// 테이블을 정의합니다
var table = document.createelement ( 'table');
table.setattribute ( 'style', 'width : 450px;');
// 테이블 제목을 정의합니다
var 캡션 = document.createElement ( 'caption');
caption.innerhtml = '학생 정보 테이블';
// 제목을 테이블에 추가합니다
테이블. AppendChild (캡션);
// CreateRt () 메서드를 호출하여 제목 줄을 생성하고 테이블에 추가합니다.
table.appendChild (CreateTret ( 'name', 'age', 'gender');
Table.ChildNodes [1] .SetAttribute ( 'Style', 'Background :#Cae8ea;');
//alert(table.firstchild);
// 루프 json 객체의 경우, 루프 된 객체는 createtr () 메소드에 의해 생성되고 테이블에 추가됩니다.
for (var i = 0; i <data.length; i ++) {
table.appendChild (CreateTret (data [i]. 이름, 데이터 [i] .age, data [i] .gender));
}
리턴 테이블;
};
// 사용자가 보낸 변수를 기반으로 테이블에서 행을 생성하는 방법
var createret = function (이름, 나이, 성별) {
// 행 요소 레이블을 정의합니다
var tr = document.createelement ( 'tr');
// 열 요소 레이블을 정의합니다
var tdname = document.createElement ( 'td');
// 열 노드의 텍스트 노드 값 설정
tdname.innerhtml = 이름;
var tdage = document.createElement ( 'td');
tdage.innerhtml = Age;
var tdgender = document.createElement ( 'td');
tdgender.appendChild (document.createtextnode (gender)); // tdgender.innerhtml = gender;
// 행 요소 노드에 열 값을 추가합니다
Tr.AppendChild (tdname);
Tr.AppendChild (Tdage);
Tr.AppendChild (Tdgender);
// 생성 된 행 레이블을 반환합니다
Return Tr;
};
</스크립트>
</head>
<body>
</body>
</html>