Javascript는 td_javascript 기술의 값 전환을 실현합니다.

프론트 인터뷰 중 면접 질문을 접했는데, 당시 아무 생각이 없어서 답변을 드리지 못해서 오늘 정리해서 공유드립니다.

원래 질문은 다음과 같습니다. 개체 방법을 사용하여 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();