JavaScript에서 다양한 행 및 셀 수를 사용하여 특정 레이아웃을 달성하기 위해 테이블 ​​생성 기능을 수정하는 방법은 무엇입니까?

특정 레이아웃에 대한 테이블 생성 기능 수정

행 3개, 셀 2개로 구성된 테이블을 생성하도록 설계된 JavaScript 함수가 주어졌을 때 이를 수정하는 방법에 대한 지침을 구하는 질문입니다. 3개의 행이 있지만 첫 번째와 세 번째 행에는 2개의 셀만 있고 두 번째 행에는 두 행에 걸쳐 있는 하나의 셀만 있는 특정 테이블 레이아웃을 복제합니다.

JavaScript 코드 적용 :

아래 표시된 것처럼 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);
}</code>

이 코드:

• 폭이 100픽셀이고 검은색 테두리가 있는 테이블을 만듭니다.
• 3행을 반복하여 매번 새 행을 생성합니다.
• 각 행에 대해 2열을 반복합니다. , 각 열에 대해 새 셀을 생성합니다.
• rowSpan 속성을 2로 설정하여 두 번째 행이 두 행에 걸쳐 있도록 조정합니다.
• 행과 셀 인덱스를 검사하여 두 번째 루프를 중단합니다. 원하는 레이아웃을 선택하세요.

최종 결과:

수정된 tableCreate 함수를 실행하면 주어진 레이아웃의 테이블이 생성됩니다.

Cell I0/J0	Cell I0/J1
Cell I1/J0	Cell I1/J1
Cell I2/J0

위 내용은 JavaScript에서 다양한 행 및 셀 수를 사용하여 특정 레이아웃을 달성하기 위해 테이블 ​​생성 기능을 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!