JavaScript를 사용하여 병합 셀이 포함된 테이블을 만드는 방법은 무엇입니까?-JS 튜토리얼-php.cn

How to Create Tables with Merge Cells Using JavaScript?

JavaScript를 사용하여 복잡한 테이블 생성

JavaScript에서는

그리고 강요. 그러나 때로는 더 복잡한 구조의 테이블이 필요할 때도 있습니다.

도전과제: 특정 테이블 구조 생성

3행으로 구성된 테이블을 생성하는 JavaScript 함수가 있다고 가정해 보겠습니다. 각 행에는 2개의 셀이 있습니다. 다음 테이블을 생성하기 위해 이 함수를 어떻게 적용할 수 있습니까?

<code class="html"><table>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td rowspan="2"> </td>
  </tr>
  <tr>
    <td> </td>
  </tr>
</table></code>

로그인 후 복사

해결책: rowSpan을 사용한 행 병합

병합된 셀이 있는 테이블을 생성하려면 다음이 필요합니다. rowSpan 속성을 사용합니다. 코드를 수정하는 방법은 다음과 같습니다.

JavaScript 코드:

<code class="javascript">function tableCreate() {
  const body = document.body;
  const tbl = document.createElement('table');

  for (let i = 0; i < 3; i++) {
    const row = document.createElement('tr');

    for (let j = 0; j < 2; j++) {
      if (i === 2 && j === 1) {
        continue;
      } else {
        const cell = document.createElement('td');
        cell.textContent = `Cell I${i}/J${j}`;
        if (i === 1 && j === 1) {
          cell.setAttribute('rowspan', '2');
        }
        row.appendChild(cell);
      }
    }
    tbl.appendChild(row);
  }
  body.appendChild(tbl);
}

tableCreate();</code>

로그인 후 복사

설명:

두 번째 행의 두 번째 셀에 rowSpan 속성이 추가되어 아래 셀과 병합됩니다.
rowSpan이 있는 셀은 중복 셀을 방지하기 위해 j === 1 반복에서 건너뜁니다.

insertRow 및 insertCell을 사용하여 개선된 단축 코드:

<code class="javascript">function tableCreate() {
  const body = document.body;
  const tbl = document.createElement('table');
  tbl.style.width = '100px';
  tbl.style.border = '1px solid black';

  for (let i = 0; i < 3; i++) {
    const tr = tbl.insertRow();
    for (let j = 0; j < 2; j++) {
      if (i === 2 && j === 1) {
        break;
      } else {
        const td = tr.insertCell();
        td.appendChild(document.createTextNode(`Cell I${i}/J${j}`));
        td.style.border = '1px solid black';
        if (i === 1 && j === 1) {
          td.setAttribute('rowSpan', '2');
        }
      }
    }
  }
  body.appendChild(tbl);
}

tableCreate();</code>

로그인 후 복사

이 개선된 버전은 보다 간결한 구현을 위해 insertRow 및 insertCell 메소드를 사용합니다.

위 내용은 JavaScript를 사용하여 병합 셀이 포함된 테이블을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php

이전 기사：JavaScript를 사용하여 행 범위 및 병합된 셀이 포함된 복잡한 HTML 테이블을 만드는 방법은 무엇입니까? 다음 기사：JavaScript에서 행 범위와 셀 범위가 서로 다른 복잡한 테이블을 만드는 방법은 무엇입니까?

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

에서 2024-04-29 11:01:01

2075

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19