JavaScript를 사용하여 행 범위 및 병합된 셀이 포함된 복잡한 HTML 테이블을 만드는 방법은 무엇입니까?

JavaScript를 사용하여 복잡한 HTML 테이블 구조 재생성

이 기사에서는 개발자가 직면하는 특정 문제에 대해 설명합니다. JavaScript를 사용한 HTML 테이블 구조입니다. 문제와 해결 방법을 자세히 살펴보겠습니다.

문제:

행 3개와 열 2개로 구성된 간단한 테이블을 생성하는 JavaScript 함수가 있습니다. 문제는 제공된 HTML 코드에 설명된 것처럼 다양한 행 범위와 병합된 셀을 사용하여 더 복잡한 테이블 구조를 생성하도록 함수를 수정하는 것입니다.

해결책:

이를 달성하려면 HTML DOM에서 제공하는 내장 insertRow 및 insertCell 메소드를 활용하겠습니다. 수정된 JavaScript 코드는 다음과 같습니다.

<code class="javascript">function tableCreate() {
  const body = document.body,
        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 &amp;&amp; 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 &amp;&amp; j === 1) {
          td.setAttribute('rowSpan', '2');
        }
      }
    }
  }
  body.appendChild(tbl);
}

tableCreate();</code>

설명:

코드는 테이블 행과 열을 반복하여 insertCell을 사용하여 개별 셀을 생성하고 그에 따라 속성을 설정합니다. 조건 if (i === 1 && j === 1) { td.setAttribute('rowSpan', '2'); }이 중요합니다. 행 2의 병합된 셀에 대한 행 범위를 처리합니다.

insertRow 및 insertCell 메소드를 사용하면 테이블 구조에 대한 제어력이 향상되어 다양한 행 범위와 병합된 셀이 포함된 복잡한 테이블을 빠르고 동적으로 생성할 수 있습니다. .

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