자바스크립트에 테이블을 추가하는 방법

JavaScript는 HTML 문서를 통해 웹 페이지에 직접 삽입하고 웹 브라우저에서 실행할 수 있는 클라이언트측 스크립팅 언어입니다. 동적으로 생성되는 HTML 테이블을 포함하여 JavaScript를 통해 많은 웹 페이지 대화형 효과를 얻을 수 있습니다. JavaScript를 사용하여 HTML 테이블을 생성하는 방법 중 하나를 아래에 소개합니다.

1단계: 테이블 컨테이너 만들기

HTML 테이블을 생성하려면 먼저 생성된 테이블을 저장할 HTML 문서에 테이블 컨테이너를 만들어야 합니다. HTML에서 테이블 컨테이너는 테이블 요소로 표현될 수 있습니다. 즉:

<table id="myTable"></table>

위 코드에서 id 속성은 JavaScript에서 참조를 용이하게 하기 위해 테이블 ​​컨테이너에 대한 고유 식별자를 지정하는 데 사용됩니다.

2단계: 테이블 헤더 추가

테이블 헤더에는 일반적으로 JavaScript를 통해 동적으로 추가할 수 있는 테이블의 열 이름이 포함됩니다. 다음은 테이블 헤더를 추가하는 샘플 코드입니다.

var table = document.getElementById("myTable");
var thead = table.createTHead();
var row = thead.insertRow();
var cell1 = row.insertCell();
var cell2 = row.insertCell();
cell1.innerHTML = "<b>姓名</b>";
cell2.innerHTML = "<b>年龄</b>";

위 코드에서 먼저 getElementById 메서드를 통해 테이블 ​​컨테이너에 대한 참조를 얻은 다음 createTHead 메서드를 호출하여 테이블 헤더를 생성한 다음 테이블 행을 추가합니다. insertRow 메소드를 통해 헤더를 추가하고 마지막으로 insertCell 메소드를 통해 두 개의 셀을 추가하고 셀의 텍스트 내용을 innerHTML 속성을 사용하여 설정했습니다.

3단계: 테이블 데이터 추가

테이블 데이터는 일반적으로 백엔드 서버에서 가져옵니다. 데이터는 Ajax 및 기타 방법을 통해 비동기적으로 가져온 다음 JavaScript를 통해 테이블에 동적으로 추가할 수 있습니다. 다음은 테이블 데이터를 추가하는 샘플 코드입니다.

function loadData() {
  // 通过Ajax获取数据，然后解析成一个二维数组
  var data = [
    ["张三", 22],
    ["李四", 23],
    ["王五", 24],
    ...
  ];
  var table = document.getElementById("myTable");
  var tbody = table.createTBody();
  for (var i = 0; i < data.length; i++) {
    var row = tbody.insertRow();
    var cell1 = row.insertCell();
    var cell2 = row.insertCell();
    cell1.innerHTML = data[i][0];
    cell2.innerHTML = data[i][1];
  }
}

위 코드에서 loadData 함수는 Ajax를 통해 2차원 배열 데이터를 얻은 후 for 루프를 통해 배열을 순회하고 테이블 행과 셀을 동적으로 생성하고 채웁니다. 데이터를 셀에 넣습니다.

4단계: 함수 호출

HTML 문서에서는 버튼이나 기타 대화형 메서드를 통해 loadData 함수를 호출하여 테이블 데이터를 동적으로 로드할 수 있습니다. 다음은 함수 호출을 위한 샘플 코드입니다.

<button onclick="loadData()">加载表格数据</button>

버튼을 클릭하면 loadData 함수가 호출되어 HTML 테이블을 동적으로 생성하는 프로세스가 완료됩니다. 위는 JavaScript를 사용하여 HTML 테이블을 동적으로 추가하는 예입니다. 실제 애플리케이션에서는 보다 복잡한 테이블 효과를 얻기 위해 실제 요구에 따라 코드를 유연하게 조정할 수 있습니다.

위 내용은 자바스크립트에 테이블을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!