JavaScript에서 행 범위와 셀 범위가 서로 다른 복잡한 테이블을 만드는 방법은 무엇입니까?

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

JavaScript에서 tableCreate() 함수는 두 개의 행과 두 개의 셀이 있는 간단한 테이블을 생성합니다. 그러나 제공된 것과 같이 더 복잡한 테이블을 생성하기 위해 수정될 수 있습니다.

이를 달성하려면 요소를 수동으로 생성하는 대신 함수 내의 for 루프를 수정하고 insertRow 및 insertCell 메소드를 사용하십시오. 업데이트된 코드는 다음과 같습니다.

<code class="js">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 & 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>

이 수정된 코드는 행 3개와 셀 2개로 구성된 테이블을 생성하며, 두 번째 셀은 행 2개에 걸쳐 있습니다. CSS를 사용하여 테이블의 너비와 테두리를 설정합니다. rowSpan 속성은 교차하는 셀에 추가되어 여러 행에 걸쳐 있어야 함을 지정합니다.

위 내용은 JavaScript에서 행 범위와 셀 범위가 서로 다른 복잡한 테이블을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!