//이 코드는 IE9, Firefox, Chrome 및 safair에서 테스트되었으며 문제가 없습니다. 표에 몇 가지 간단한 스타일이 추가되었지만 아직 개선해야 할 몇 가지 문제가 있습니다. ! 렌더링은 다음과 같습니다. 코드는 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. 로 변환된 JSON 배열 <br>캡션 { <br>패딩: 0 0 5px 0; <br>너비: 450px; <br>글꼴: 기울임꼴 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; <br> 텍스트 정렬: 오른쪽; <br>} <br>테두리: 1px 솔리드 #c1dad7 <br><br>패딩: 6px 6px 6px 12px <br>텍스트 -align: 중앙 <br>너비:150px; <br><BR>//웹페이지 로드 후 onload 이벤트 실행 <BR>onload = function(){ <BR>var body=document.getElementsByTagName( 'body')[0]; <br>body.appendChild(createTable(data)); <br>}//수신된 json 배열을 기반으로 테이블 생성<BR>var createTable = function( data){ <BR><BR>//테이블 정의 <BR>var table=document.createElement('table') <br>table.setAttribute('style','width: 450px ;'); <br> <BR>//테이블 제목 정의<br>var caption=document.createElement('caption') <br>caption.innerHTML ='학생 정보 테이블' <BR><BR>/ /테이블에 제목 추가<br>table.appendChild(caption) <br>//createTr() 메서드를 호출하여 제목 행을 생성하고 테이블에 추가합니다. <BR>table.appendChild(createTr('이름','나이','성별')) <BR>table.childNodes[1].setAttribute('style','Background:#cae8ea;'); >//alert(table.firstChild) <br>//for는 json 객체를 루프한 다음 createTr() 메서드를 통해 루프된 객체의 행을 생성하고 이를 테이블에 추가합니다. <br>for(var i=0 ;i< data.length;i ){ <BR>table.appendChild(createTr(data[i].name,data[i].age,data[i].gender)) <BR>} <BR>return table; <BR>}; <BR><BR><BR>//사용자가 전달한 변수를 기반으로 테이블에 행을 생성하는 방법<BR>var createTr = function(name,age,gender){ <BR> //행 요소 레이블 정의 <BR>var tr=document.createElement('tr'); <BR>//열 요소 레이블 정의<br>var tdName=document.createElement('td'); /열 노드의 텍스트 설정 노드의 값 <br>tdName.innerHTML = name <BR>var tdAge = document.createElement('td') <BR><BR>tdAge.innerHTML = age; 🎜>var tdGender = document.createElement(' td'); <BR><BR>tdGender.appendChild(document.createTextNode(gender));//tdGender.innerHTML = 성별과 동일함 <BR>//열 추가; 행 요소 node<BR>tr .appendChild(tdName); <BR>tr.appendChild(tdAge); <BR><br>//생성된 행 레이블 반환 <br>tr; <BR>}; <br></head> <br></html> 🎜><BR>