DOM 조작 테이블

HTML 양식 테이블 요소는 가장 복잡한 구조 중 하나입니다. 테이블을 만들려면 일반적으로는 행, 셀, 테이블 상단 라벨 측면을 보여주는 테이블을 포함해야합니다. 레이블이 많이 포함하기 때문에, 때문에 작성하고 수정 테이블은 필연적으로 핵심 DOM 방법을 사용하여 많은 코드를 작성해야 경향이있다. 이 문서 상세 DOM의 동작 방법의 특성 및 형태를 설명

요구는
  다음과 같은 형식 DOM 테이블 구조를 통해 달성 할

<table border = "1" width = "100%">
    <tbody>
        <tr>
            <td>Cell 1,1</td>
            <td>Cell 2,1</td>
        </tr>
        <tr>
            <td>Cell 1,2</td>
            <td>Cell 2,2</td>
        </tr>        
    </tbody>
</table>
 专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

DOMcore
  방법으로하면 DOMcore, 다음과 같은 방법

//创建表格
var table = document.createElement("table");
table.border = "1";
table.width = "100%";

//创建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

//创建第一行
var row1 = document.createElement("tr");
tbody.appendChild(row1);
var cell1_1 = document.createElement("td");
cell1_1.appendChild(document.createTextNode("Cell 1,1"));
row1.appendChild(cell1_1);
var cell2_1 = document.createElement("td");
cell2_1.appendChild(document.createTextNode("Cell 2,1"));
row1.appendChild(cell2_1);

//创建第二行
var row2 = document.createElement("tr");
tbody.appendChild(row2);
var cell1_2 = document.createElement("td");
cell1_2.appendChild(document.createTextNode("Cell 1,2"));
row2.appendChild(cell1_2);
var cell2_2 = document.createElement("td");
cell2_2.appendChild(document.createTextNode("Cell 2,2"));
row2.appendChild(cell2_2);

//将表格添加到文档主体中
document.body.appendChild(table);
 

속성 및 메서드

물론 DOM 코드가 구축 테이블을 용이하게하기 위해, 매우 긴, HTML DOM이다

,, 요소는 속성들 및 방법을 추가했다.

[1] 인

속성 및 방법 추가 요소

caption:保存着对<caption>元素的指针
tBodies:是一个<tbody>元素的HTMLCollection
tFoot:保存着对<tfoot>元素的指针
tHead:保存着对<thead>元素的指针
createTHead():创建<thead>元素，将其放到表格中，返回引用
createTFoot():创建<tfoot>元素，将其放到表格中，返回引用
createCaption():创建<caption>元素，将其放到表格中，返回引用
deleteTHead():删除<thead>元素
deleteTFoot():删除<tfoot>元素
deleteCaption():删除<caption>元素

[2], 소자 특성과 첨가하는 방법

rows:保存着<tbody>元素中行的HTMLCollection
deleteRow(pos):删除指定位置的行
insertRow(pos):向rows集合中的指定位置插入一行，返回对新插入行的引用

[3] 특성과 첨가 원소의 방법

cells:保存着<tr>元素中单元格的HTMLCollection
deleteCell(pos):删除指定位置的单元格
insertCell(pos):向cells集合中的指定位置插入一个单元格，返回对新插入单元格的引用

코드 재 작성

//创建表格
var table = document.createElement("table");
table.border = "1";
table.width = "100%";

//创建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

//创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));

//创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));

//将表格添加到文档主体中
document.body.appendChild(table);
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

결과는 보여