Ajax를 사용하여 HTML로 표를 표시하는 방법

Ajax는 HTML 테이블 및 XML 데이터와 함께 작동하여 웹 리더 레코드 목록을 표시합니다. Ajax는 각 HTML 요소를 정의하는 대신 표 요소에 대한 코드를 작성하지 않고 테이블 함수를 호출하여 레코드를 행과 열로 표시 할 수 있습니다. Ajax는 XML의 각 데이터 항목을 반복하고 데이터를 표시할지 숨길 지 선택합니다.

1.

표를 표시하는 데 사용할 HTML 또는 Ajax 파일을 마우스 오른쪽 단추로 누르십시오. 테이블에 대한 데이터를 검색하는 데 사용할 XML 파일을 엽니 다. 다음 Ajax 문은 고객 목록이있는 XML 파일을 엽니 다.

새로운 Ajax.Request ( 'customers.xml', {method : 'get', onSuccess : function (transport)}

2.

태그 및 태그의 데이터 목록을 가져옵니다. 다음 Ajax 코드는 반복하고 테이블을 생성하는 데 사용하는 데이터를로드합니다.

var customers = transport.responseXML.getElementsByTagName ( 'customer');

삼.

각 XML 요소를 반복하는 "for"루프를 만듭니다. 다음 코드는 Ajax에서 "for"루프를 설정하는 방법을 보여줍니다.

for (var i = 0; i <customers.length; i ++) {}

4.

데이터를 표시 할 테이블 행과 셀을 만듭니다. 다음 코드는 테이블 구조를 설정하는 행 및 셀 변수를 만듭니다.

var row = $ ( 'customers'). insertRow (-1); var cell = row.insertCell (-1);

5.

테이블의 셀에 데이터를 추가하십시오. 다음 코드는 고객 이름을 셀에 추가합니다.

cell.innerHTML = 고객;