Javascript로 테이블을 만드는 방법

JavaScript는 브라우저에서 직접 실행되는 스크립팅 언어로서 HTML 페이지의 콘텐츠를 동적으로 생성, 삽입 및 수정할 수 있습니다. 테이블은 웹 페이지에 데이터를 표시하는 일반적인 방법 중 하나이며, DOM을 조작하는 JavaScript의 강력한 기능을 통해 HTML 페이지에서 테이블을 동적으로 생성하고 운영할 수 있습니다. 이 기사에서는 JavaScript로 테이블을 만드는 방법을 소개합니다.

HTML 테이블의 기본 구조

JavaScript를 사용하여 테이블을 만드는 방법을 소개하기 전에 먼저 HTML 테이블의 기본 구조를 살펴보겠습니다.

HTML 테이블은 일반적으로 table, tr 및 td의 세 가지 요소로 구성됩니다. 그 중 테이블(table)은 테이블 전체를 포함하는 전체(whole)이고, tr(row)은 테이블의 행(row)을 나타내고, td(cell)는 테이블의 셀을 의미한다.

다음은 간단한 HTML 테이블 예입니다.

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

JavaScript를 사용하여 동적으로 테이블 생성

JavaScript에서는 테이블, 행 및 셀 요소를 생성하고 이를 문서에 추가하여 테이블을 동적으로 생성할 수 있습니다.

테이블 만들기

document.createElement() 메서드를 사용하여 테이블 요소 개체를 만들 수 있습니다.

var table = document.createElement('table');

행 및 셀 만들기

table.insertRow() 메서드를 사용하여 테이블에 새 행 개체를 만듭니다. , 행 사용 .insertCell() 메서드는 행에 셀 객체를 생성합니다.

다음은 JavaScript를 사용하여 3행 3열로 구성된 테이블을 생성하는 동적으로 테이블을 생성하는 예입니다.

var table = document.createElement('table');
for (var i = 0; i < 3; i++) {
  var row = table.insertRow();
  for (var j = 0; j < 3; j++) {
    var cell = row.insertCell();
    cell.innerHTML = i + "," + j;
  }
}
document.body.appendChild(table);

위 코드에서는 먼저 테이블 요소 객체를 생성하고 3행과 3열로 구성된 테이블을 생성합니다. 루프 시트를 통한 3개의 열. 각 루프에서 insertRow() 메서드를 사용하여 새 행 개체를 만들고, insertCell() 메서드를 사용하여 새 셀 개체를 만든 다음, 셀 개체를 행에 추가합니다. 그런 다음 innerHTML 속성을 통해 각 셀에 데이터를 채우고 마지막으로 전체 테이블을 문서에 추가합니다.

테이블 스타일 수정

element.style 속성과 CSS 스타일 속성을 사용하여 테이블 스타일을 수정할 수 있습니다.

다음은 JavaScript를 사용하여 배경색과 테두리가 있는 테이블을 동적으로 생성하는 테이블 스타일을 수정하는 예입니다.

var table = document.createElement('table');
table.style.backgroundColor = '#eee';
table.style.border = '1px solid #000';

for (var i = 0; i < 3; i++) {
  var row = table.insertRow();
  for (var j = 0; j < 3; j++) {
    var cell = row.insertCell();
    cell.innerHTML = i + "," + j;
    cell.style.border = '1px solid #000';
    cell.style.padding = '10px';
  }
}
document.body.appendChild(table);

위 코드에서는 table.style.BackgroundColor 및 table.style.border 속성을 사용합니다. 테이블의 배경색과 테두리 스타일을 설정합니다. 그런 다음 각 셀에 테두리와 패딩을 설정하여 더 보기 좋게 만듭니다.

요약

테이블은 웹 애플리케이션의 일반적인 UI 요소 중 하나입니다. JavaScript를 사용하여 테이블을 동적으로 생성하고 조작할 수 있습니다. 이 기사에서는 JavaScript를 사용하여 테이블을 생성, 수정 및 조작하는 방법을 다루었습니다. 이 기사가 JavaScript와 HTML 테이블을 더 잘 이해하는 데 도움이 되었기를 바랍니다.

위 내용은 Javascript로 테이블을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!