เมื่อฉันสัมภาษณ์ส่วนหน้าก่อนหน้านี้ฉันพบคำถามสัมภาษณ์ ฉันไม่มีความคิดใด ๆ ในเวลานั้นดังนั้นฉันจึงไม่ตอบ วันนี้ฉันแยกออกและแบ่งปันกับคุณ:
คำถามดั้งเดิมคือ: ใช้วิธีการวัตถุเพื่อสร้างตาราง 2x2 ต้องใช้ปุ่มในแถวที่สองและเซลล์คอลัมน์ที่สอง เมื่อคลิกปุ่มนี้ค่าของแถวแรกและค่าของคอลัมน์แรกของแถวที่สองและค่าของคอลัมน์แรกของแถวที่สองดูรูปด้านล่าง
สร้างตาราง
เอฟเฟกต์คลิก
ฉันโง่ หากคุณมีวิธีที่ดีกว่าโปรดบอกฉัน ฉันคิดเกี่ยวกับเรื่องนี้มานานแล้วและในที่สุดก็มีผลลัพธ์บางอย่าง:
1. สร้างวัตถุตาราง
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> เอกสาร </title>
<style>
ตาราง td {text-allign: center;}
</style>
</head>
<body>
<H2> สร้างตารางโดยใช้วัตถุ </h2>
<script>
var table = {
ค่า 1: "ค่า 1",
ค่า 2: "value2",
แถว: 2,
เซลล์: 2,
สร้าง: function () {
// สร้างตาราง
var table = document.createElement ("ตาราง");
table.border = 1;
table.width = "500";
// สร้างปุ่ม
ปุ่ม var = document.createElement ("ปุ่ม");
button.innerhtml = "switch";
button.name = "Qiehuan";
button.setAttribute ("onclick", "qiehuan ()");
// สร้างแถว
สำหรับ (var i = 0; i <this.row; i ++) {
table.insertrow ();
-
// สร้างคอลัมน์
สำหรับ (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;
-
-
table.create ();
</script>
</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/ชื่อ/เพศเพื่อเปลี่ยนการเรียงลำดับ:
ต้นฉบับ
ผล
รหัส:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> เอกสาร </title>
</head>
<body>
<table>
<th colspan = "3"> คลิกเพื่อแทนที่เนื้อหา </th>
<tr>
<td id = "id"> id </td>
<td id = "ชื่อ"> ชื่อ </td>
<td> <span id = "เพศ"> เพศ </span> </td>
</tr>
<tr>
<td> 1 </td>
<td> a </td>
<td> ชาย </td>
</tr>
<tr>
<Td> 2 </td>
<td> b </td>
<td> หญิง </td>
</tr>
</table>
<script>
// เอฟเฟกต์การผูก --- ฉันไม่ถูกต้อง
document.getElementById ('id'). addeventListener ('คลิก', f_switch, false);
document.getElementById ('ชื่อ'). addeventListener ('คลิก', f_switch, false);
document.getElementById ('เพศ'). addEventListener ('คลิก', f_switch, false);
ฟังก์ชั่น 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);
-
</script>
<br>
</body>
</html>