프론트 인터뷰 중 면접 질문을 접했는데, 당시 아무 생각이 없어서 답변을 드리지 못해서 오늘 정리해서 공유드립니다.
원래 질문은 다음과 같습니다. 개체 방법을 사용하여 2x2 테이블을 만들려면 두 번째 행과 두 번째 열의 셀에 버튼이 필요합니다. 이 버튼을 클릭하면 첫 번째 행과 첫 번째 열의 값이 됩니다. 두 번째와 동일 행의 첫 번째 열의 값을 바꾸십시오. 아래 그림을 참조하십시오
양식 작성
클릭 효과
저는 바보입니다. 더 좋은 방법이 있다면 알려주세요. 오랫동안 고민한 끝에 결과가 나왔습니다.
1. 테이블 개체 생성
문서
<스타일>
테이블 td{text-align: center;}
객체를 사용하여 테이블 만들기
var 테이블={
값1:"값1",
값2:"값2",
행:2,
셀:2,
생성:함수(){
//테이블 생성
var table=document.createElement("table");
table.border=1;
table.width="500"
//버튼 생성
var 버튼=document.createElement("버튼")
button.innerHTML="스위치";
버튼.이름="qiehuan";
버튼.setAttribute("onclick","qiehuan()");
//행 생성
for(var i=0;i
table.insertRow();
}
//열 생성
for(var i=0;i
table.rows[i].insertCell();
table.rows[i].insertCell();
}
//본문에 테이블 추가
Document.body.appendChild(테이블);
var table=document.getElementsByTagName("table")[0];
var row1=table.rows[0];
var row2=table.rows[1];
table.rows[1].cells[1].appendChild(버튼);
var a=row1.cells[0].innerHTML=this.value1;
var b=row2.cells[0].innerHTML=this.value2;
}
}
table.create();
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
