전에 프론트 엔드를 인터뷰 할 때 인터뷰 질문이 발생했습니다. 당시에는 아무런 생각도 없었기 때문에 대답하지 않았습니다. 오늘 나는 당신과 분류하고 공유했습니다.
원래 질문은 다음과 같습니다. 객체 방법을 사용하여 2x2 테이블을 만들고 두 번째 행 및 두 번째 열 셀에 버튼이 필요합니다. 이 버튼을 클릭하면 첫 번째 행의 값 및 두 번째 행의 첫 열의 값과 두 번째 행의 첫 열의 값이 아래 그림을 참조하십시오.
테이블을 만듭니다
효과를 클릭합니다
나는 멍청하다. 더 나은 방법이 있다면 말 해주세요. 나는 그것에 대해 오랫동안 생각했고 마침내 몇 가지 결과를 얻었습니다.
1. 테이블 객체를 만듭니다
코드 사본은 다음과 같습니다.
<! doctype html>
<html lang = "en">
<헤드>
<meta charset = "utf-8">
<title> 문서 </title>
<스타일>
표 TD {텍스트-정렬 : 중심;}
</스타일>
</head>
<body>
<h2> 물체를 사용하여 테이블을 만듭니다 </h2>
<cript>
var 테이블 = {
value1 : "value1",
value2 : "value2",
행 : 2,
셀 : 2,
작성 : function () {
// 테이블을 만듭니다
var table = document.createelement ( "테이블");
Table.border = 1;
table.width = "500";
// 버튼을 만듭니다
var button = document.createelement ( "버튼");
button.innerhtml = "switch";
button.name = "Qiehuan";
button.setattribute ( "onclick", "qiehuan ()");
// 행을 만듭니다
for (var i = 0; i <this.row; i ++) {
Table.inserTrow ();
}
// 열을 만듭니다
for (var i = 0; i <this.cell; i ++) {
table.rows [i] .insertcell ();
table.rows [i] .insertcell ();
}
// 테이블을 몸에 추가합니다
document.body.appendChild (표);
var table = document.getElementsByTagName ( "테이블") [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;
}
}
테이블 .create ();
</스크립트>
</body>
</html>
테이블 방법을 만드는 효과는 다음과 같습니다.
코드를 전환하려면 클릭하십시오.
코드 사본은 다음과 같습니다.
함수 qiehuan () {
// 테이블을 얻습니다
var table = document.getElementsByTagName ( "테이블") [0];
// tr을 얻습니다
var row1 = table.rows [0];
var row2 = table.rows [1];
// 컨텐츠를 교환합니다
// 데이터를 저장할 새 요소를 만듭니다
var a = row1.cells [0] .innerhtml;
var b = row2.cells [0] .innerhtml;
row1.cells [0] .innerhtml = b;
row2.cells [0] .innerhtml = a;
}
토글 버튼 효과를 클릭하면 다음과 같습니다.
확대:
1. ID/Name/Sex를 클릭하여 정렬을 변경하고 싶습니다.
원래의
효과
암호:
코드 사본은 다음과 같습니다.
<! doctype html>
<html lang = "en">
<헤드>
<meta charset = "utf-8">
<title> 문서 </title>
</head>
<body>
<테이블>
<th colspan = "3"> 컨텐츠를 교체하려면 클릭하십시오
<tr>
<td id = "id"> id </td>
<td id = "name"> name </td>
<td> <span id = "sex"> 섹스 </span> </td>
</tr>
<tr>
<td> 1 </td>
<td> a </td>
<td> 남성 </td>
</tr>
<tr>
<td> 2 </td>
<td> b </td>
<td> 여성 </td>
</tr>
</테이블>
<cript>
// 바인딩 효과 --- 나는 무효입니다
document.getElementById ( 'id'). addeventListener ( 'click', f_switch, false);
document.getElementById ( 'name'). addeventListener ( 'click', f_switch, false);
documb
함수 f_switch () {
// 테이블을 얻습니다
var table = document.getElementsByTagName ( "테이블") [0];
// 행 요소를 가져옵니다
var row1 = table.rows [2];
var row2 = table.rows [3];
// 메소드 1
// 데이터를 저장할 새 요소를 만듭니다
var newrow = document.createElement ( "tr");
var newhtml = newrow.innerhtml = row2.innerhtml;
var newrow2 = document.createElement ( "tr");
var newhtml2 = newrow2.innerhtml = row1.innerhtml;
//바꾸다
row1.innerhtml = newhtml;
row2.innerhtml = newhtml2;
// 방법 2
// 이해가 안 돼요 ... 다음 문장을 실현할 수 있습니다
//table.appendChild(Row1);
}
</스크립트>
<br>
</body>
</html>