테이블에서 자바스크립트를 편집하는 방법

테이블은 웹 개발에서 일반적으로 사용되는 요소 중 하나로 데이터나 레이아웃 페이지 등을 표시하는 데 사용됩니다. 테이블 관련 JavaScript 작업도 개발자에게 필요한 기술 중 하나입니다. 이 기사에서는 테이블의 JavaScript 작업을 편집하는 방법을 자세히 소개합니다.

1. 테이블의 기본 지식

HTML에서는 table, tr, th, td 등의 태그를 사용하여 테이블을 구현합니다. 여기서 table은 테이블 전체를 나타내고, tr은 테이블의 행을 나타내며, th는 헤더를 나타냅니다. cell은 테이블의 데이터 셀이고, td는 테이블의 데이터 셀을 나타냅니다. 다음은 간단한 테이블입니다.

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>25</td>
    <td>女</td>
  </tr>
</table>

이렇게 하면 세 개의 데이터 열이 포함된 테이블이 페이지에 표시될 수 있습니다. 다음으로 이 표를 예로 들어 JavaScript를 통해 표를 편집하는 방법을 보여 드리겠습니다.

2 테이블 개체 가져오기

JavaScript에서는 문서 개체의 getElementById 메서드 또는 getElementsByTagName 메서드를 통해 테이블 ​​개체를 가져올 수 있습니다. 예:

var table = document.getElementById("tableId"); //通过id获取表格对象
var td = document.getElementsByTagName("td"); //通过标签名获取所有表格单元格对象

getElementById 메서드를 사용하여 테이블 개체를 가져오려면 다음이 필요합니다. HTML의 해당 테이블에 id 속성을 추가합니다. 예:

<table id="tableId">
  <!-- 表格内容 -->
</table>

3. 테이블의 행과 셀 가져오기

테이블의 행과 셀을 가져오는 것은 테이블을 작동하는 가장 기본적인 작업 중 하나입니다. 테이블 개체의 행 속성을 통해 테이블의 모든 행을 가져올 수 있고, 행 개체의 셀 속성을 통해 행의 모든 ​​셀을 가져올 수 있습니다. 예:

//获取表头行对象
var thead = table.rows[0];
//获取第一行对象
var tr = table.rows[1];
//获取第一行第一列单元格对象
var td = table.rows[1].cells[0];
//获取第二行第三列单元格对象
var td2 = table.rows[2].cells[2];

4. 행과 셀 추가

테이블에 행과 셀을 동적으로 추가해야 하는 경우가 종종 있습니다. 행 객체를 반환하는 insertRow 메소드를 통해 행을 추가할 수 있고, 객체의 insertCell 메소드를 통해 셀을 추가할 수 있습니다. 예:

//在表格第二个位置插入一行
var newRow = table.insertRow(1);
//在该行第一个位置插入一个单元格
var newCell = newRow.insertCell(0);
newCell.innerHTML = 'Jerry';
//在该行第二个位置插入一个单元格
newCell = newRow.insertCell(1);
newCell.innerHTML = 18;
//在该行第三个位置插入一个单元格
newCell = newRow.insertCell(2);
newCell.innerHTML = '男';

이렇게 하면 테이블의 두 번째 위치에 행이 삽입되고 해당 행에 세 개의 셀이 삽입됩니다.

5. 행과 셀 삭제

테이블에서 행과 셀을 삭제하는 것도 일반적인 작업입니다. 행 객체의 제거 메소드를 통해 행을 삭제하거나, 셀 객체의 제거 메소드를 통해 셀을 삭제할 수 있습니다. 예:

//获取第三行对象
var row = table.rows[2];
//删除该行
table.deleteRow(row.rowIndex);
//获取第一行第二个单元格对象
var cell = table.rows[0].cells[1];
//删除该单元格
cell.parentNode.removeChild(cell);

6. 셀 병합

때로는 페이지 레이아웃이나 데이터 표시 등을 위해 테이블에서 인접한 셀을 병합해야 하는 경우가 있습니다. rowSpan 및 colSpan 속성을 사용하여 셀을 병합할 수 있습니다. 예:

//合并第一行第一列和第二列单元格
var td1 = table.rows[0].cells[0];
td1.rowSpan = 2;
//删除第二行第一列单元格
table.rows[1].deleteCell(0);

첫 번째 행, 첫 번째 열, 두 번째 열의 셀을 병합하고 두 번째 행, 첫 번째 열의 셀을 삭제합니다.

7. 셀 내용 수정

셀 추가, 삭제, 병합 외에도 셀 내용 수정도 일반적인 작업 중 하나입니다. 셀 객체의 innerHTML 속성이나 innerText 속성을 통해 셀 내부의 텍스트 내용을 수정할 수 있습니다. 예:

//获取第二行第三列单元格对象
var td = table.rows[2].cells[2];
//修改单元格内部文本内容
td.innerHTML = '女';

이때 두 번째 행과 세 번째 열의 셀 텍스트 내용이 "여성"으로 변경됩니다.

8. 요약

위에서는 테이블 개체 가져오기, 행 및 셀 가져오기, 행 및 셀 추가 및 삭제, 셀 병합, 셀 내용 수정 등을 포함하여 테이블의 JavaScript 편집에 대한 일반적인 작업을 소개합니다. 이러한 작업을 마스터하면 테이블 편집에 더 많은 편리함과 유연성이 제공될 수 있으며 WEB 개발 능력도 향상될 수 있습니다.

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