자바스크립트에서 테이블을 설정하는 방법

JavaScript는 대화형 웹 애플리케이션을 만드는 데 사용할 수 있고 HTML 테이블 설정에도 적합한 널리 사용되는 스크립트 언어입니다. 이 기사에서는 JavaScript를 사용하여 테이블 생성, 행 및 셀 추가, 스타일 설정 등 HTML 테이블을 설정하는 방법을 소개합니다.

1. HTML 테이블 만들기

JavaScript에서 테이블을 만드는 방법에는 두 가지가 있습니다. 첫 번째는 innerHTML 속성을 사용하는 것이고 코드는 다음과 같습니다.

var table = document.createElement("table"); // 创建一个table元素
table.innerHTML = "<tr><td>第一行，第一列</td><td>第一行，第二列</td></tr><tr><td>第二行，第一列</td><td>第二行，第二列</td></tr>"; // 设置表格内容
document.body.appendChild(table); // 将表格添加到页面中

다른 방법은 DOM을 사용하여 테이블을 만드는 것입니다. 코드는 다음과 같습니다.

var table = document.createElement("table"); // 创建一个table元素
var row1 = document.createElement("tr"); // 创建第一行
var cell1 = document.createElement("td"); // 创建第一列单元格
var cell2 = document.createElement("td"); // 创建第二列单元格
cell1.innerHTML = "第一行，第一列"; // 设置单元格内容
cell2.innerHTML = "第一行，第二列";
row1.appendChild(cell1); // 将单元格添加到行中
row1.appendChild(cell2);
var row2 = document.createElement("tr"); // 创建第二行
var cell3 = document.createElement("td"); // 创建第一列单元格
var cell4 = document.createElement("td"); // 创建第二列单元格
cell3.innerHTML = "第二行，第一列";
cell4.innerHTML = "第二行，第二列";
row2.appendChild(cell3); // 将单元格添加到行中
row2.appendChild(cell4);
table.appendChild(row1); // 将行添加到表格中
table.appendChild(row2);
document.body.appendChild(table); // 将表格添加到页面中

둘째, 행과 셀을 추가합니다

두 가지가 있습니다. JavaScript 방법으로 테이블 행과 셀을 추가하는 방법. 하나는 innerHTML 속성을 사용하는 것이고 코드는 다음과 같습니다.

var table = document.createElement("table"); // 创建一个table元素
table.innerHTML += "<tr><td>第一行，第一列</td><td>第一行，第二列</td></tr>"; // 添加一行
table.innerHTML += "<tr><td>第二行，第一列</td><td>第二行，第二列</td></tr>";
document.body.appendChild(table); // 将表格添加到页面中

다른 방법은 DOM을 사용하여 행과 셀을 추가하는 것입니다. 코드는 다음과 같습니다.

var table = document.createElement("table"); // 创建一个table元素
var row = document.createElement("tr"); // 创建新行
var cell1 = document.createElement("td"); // 创建第一列单元格
var cell2 = document.createElement("td"); // 创建第二列单元格
cell1.innerHTML = "新行，第一列"; // 设置单元格内容
cell2.innerHTML = "新行，第二列";
row.appendChild(cell1); // 将单元格添加到行中
row.appendChild(cell2);
table.appendChild(row); // 将行添加到表格中
document.body.appendChild(table); // 将表格添加到页面中

3. 스타일 설정

다음을 사용하여 테이블 스타일 설정 JavaScript도 매우 간단합니다. style 속성을 사용하여 행과 셀의 스타일을 설정할 수 있습니다. 코드는 다음과 같습니다.

var table = document.createElement("table"); // 创建一个table元素
var row = document.createElement("tr"); // 创建新行
var cell1 = document.createElement("td"); // 创建第一列单元格
var cell2 = document.createElement("td"); // 创建第二列单元格
cell1.innerHTML = "新行，第一列"; // 设置单元格内容
cell2.innerHTML = "新行，第二列";
cell1.style.border = "1px solid black"; // 设置单元格边框
cell2.style.border = "1px solid black";
row.appendChild(cell1); // 将单元格添加到行中
row.appendChild(cell2);
row.style.backgroundColor = "cyan"; // 设置行背景色
table.appendChild(row); // 将行添加到表格中
table.style.borderCollapse = "collapse"; // 设置表格边框合并
document.body.appendChild(table); // 将表格添加到页面中

요약:

이 글에서는 테이블 생성, 행 및 셀 추가 등 JavaScript를 사용하여 HTML 테이블을 설정하는 방법을 소개합니다. 스타일 설정. JavaScript를 통해 테이블을 설정하면 테이블 스타일을 더욱 유연하고 아름답게 만들 수 있습니다. 개발자는 보다 복잡하고 효율적인 테이블 설정을 달성하기 위해 필요에 따라 수정하고 확장할 수 있습니다.

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