table 태그를 Javascript로 조작합니다.HTML TableElement 정보

HTMLtable Element 인터페이스를 사용하면 자바스크립트로 탭 탭을 조작할 수 있습니다.
HTML TableElement의 개요는 무엇입니까?및 사용 방법의 총결산.

HTML TableElement이란?

HTML5에서 구현된 기능을 통해 테이블 탭을 대상으로 변환하여 행렬의 상태를 얻거나 행렬을 추가하는 등의 작업을 할 수 있습니다.
API 작업을 HTMLElement의 레이블(요소)로 사용하는 형식이 됩니다.

예를 들어 테이블 탭 내의tr 탭은 rowsプロパティ 로 표시됩니다.
열insertRow()을 추가하려면tr 탭을 추가할 수 있습니다.

· HTML TableElement 관련 API

HTMLTableElement에서 준비한 것은 테이블 탭 바로 아래의th 탭,tr 탭 등뿐입니다.
HTMLTableRowElement를 사용하여tr 탭에 td 탭을 가져오거나 추가합니다.

뭐가 편해요?

가능한 한 탭을 직접 처리합니다.
예를 들어 다음 3줄 3열의 테이블은tr 라벨이나 td 라벨로 표시됩니다.

탭

<table id="xx">
  <tr>
    <td rowspan="1" colspan="1"><br></td>
    <td rowspan="1" colspan="1"><br></td>
    <td rowspan="1" colspan="1"><br></td>
  </tr>
  <tr>
    <td rowspan="1" colspan="1"><br></td>
    <td rowspan="1" colspan="1"><br></td>
    <td rowspan="1" colspan="1"><br></td>
  </tr>
  <tr>
    <td rowspan="1" colspan="1"><br></td>
    <td rowspan="1" colspan="1"><br></td>
    <td rowspan="1" colspan="1"><br></td>
  </tr>
</table>

테이블 탭 상태에서 줄이나 열을 얻거나 추가할 수 있습니다.

인스턴스

1. 행수와 열 수 얻기

예를 들어 열 수와 줄 번호를 가져옵니다.
획득한 탭을 변수 table (임의) 로 설정하면 이 줄 속성의 길이를 가져옵니다
・table.rows.length비슷한 방식으로 HTML TableRowElement의 cells를 사용하여 줄의 셀 수를 얻습니다.첫 번째 줄의 칸 수를 얻는 공식은 다음과 같다.
・table.rows[0].cells.length획득 행렬 수

function RowCellLength(table){
    console.log("row-length:", table.rows.length)
    console.log("cell-length:", table.rows[0].cells.length)
}

▶ 실제 구현 사례
다음 표의 id 이름을 xx로 하고 행렬 수를 얻은 함수 RowCell Length에 전달하면 줄 수와 열 수를 되돌려줍니다.

2. 행 증가

응용편으로 표의 3행에 3열을 추가한 경우 다음과 같다.

function createTable(table){

    //3行目に行を追加
    newRow = table.insertRow(2)

    //セルを3つ追加
    for (let i=0; i <3; i++ ){
      newCell = newRow.insertCell(0) //先頭にセルを追加
      newCell.colSpan = "1"  //colspan="1"をセット
      newCell.rowSpan = "1"　//rowspan="1"をセット
      newCell.innerHTML = "new cell"  //セルの中に値を入力
    }
}

・table.insertRow(i)i번째 추가 행.0부터 시작합니다.
・row.insertCell(i)지정한 줄의 i번째 칸에 칸 (td 탭) 을 추가합니다.0부터 시작합니다.
・cell.colSpan = "1"지정한 셀 속성에서colspan = "1"을 설정합니다.
・row.colSpan = "1"지정한 셀 속성에서 rowspan = "1"을 설정합니다.
・cell.innerHTML = "文字列"지정한 칸 (td 탭) 에 문자열을 삽입합니다.태그도 삽입할 수 있습니다.
상기 처리에서 다음과 같은 단원을 생성한다.

<tr><td colspan="1" rowspan="1">new cell</td>

for문에서 세 번 반복하면 칸이 세 개로 변합니다.