Ketika saya mewawancarai ujung depan sebelumnya, saya menemukan pertanyaan wawancara. Saya tidak memiliki pemikiran pada waktu itu sehingga saya tidak menjawabnya. Hari ini saya beres dan membagikannya dengan Anda:
Pertanyaan asli adalah: Gunakan metode objek untuk membuat tabel 2x2, membutuhkan tombol di baris kedua dan sel kolom kedua. Saat mengklik tombol ini, nilai baris pertama dan nilai kolom pertama dari baris kedua dan nilai kolom pertama dari baris kedua, lihat gambar di bawah ini
Buat tabel
Klik Efek
Saya bodoh. Jika Anda memiliki cara yang lebih baik, tolong beri tahu saya. Saya sudah memikirkannya untuk waktu yang lama dan akhirnya mendapatkan beberapa hasil:
1. Buat objek tabel
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title> dokumen </iteme>
<tyle>
Tabel td {text-align: center;}
</tyle>
</head>
<body>
<H2> Buat tabel menggunakan objek </h2>
<script>
var table = {
value1: "value1",
value2: "value2",
Baris: 2,
Sel: 2,
create: function () {
// Buat tabel
var table = document.createElement ("tabel");
TABLE.BORDER = 1;
Table.width = "500";
// Buat tombol
var button = document.createElement ("tombol");
Button.innerHtml = "sakelar";
Button.name = "Qiehuan";
Button.setAttribute ("OnClick", "Qiehuan ()");
// Buat baris
untuk (var i = 0; i <this.row; i ++) {
Table.IserTrow ();
}
// Buat kolom
untuk (var i = 0; i <this.cell; i ++) {
Table.Rows [i] .InSertCell ();
Table.Rows [i] .InSertCell ();
}
// tambahkan meja ke tubuh
Document.Body.AppendChild (Tabel);
var table = document.getElementsbyTagname ("Tabel") [0];
var row1 = Table.rows [0];
var row2 = Table.rows [1];
Table.rows [1] .cells [1] .AppendChild (tombol);
var a = row1.cells [0] .InnerHtMl = this.value1;
var b = row2.cells [0] .innerHtml = this.value2;
}
}
Table.create ();
</script>
</body>
</html>
Efek membuat metode tabel adalah:
Klik untuk beralih Kode:
Salinan kode adalah sebagai berikut:
fungsi qiehuan () {
// Dapatkan meja
var table = document.getElementsbyTagname ("Tabel") [0];
// Dapatkan Tr
var row1 = Table.rows [0];
var row2 = Table.rows [1];
// bertukar konten
// Buat elemen baru untuk menyimpan data
var a = row1.cells [0] .InnerHTML;
var b = row2.cells [0] .innerHtml;
row1.cells [0] .innerHtml = b;
row2.cells [0] .InnerHtMl = a;
}
Mengklik efek tombol sakelar adalah:
Perpanjangan:
1. Saya ingin mengklik ID/Nama/Seks untuk mengubah penyortiran:
asli
Memengaruhi
Kode:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title> dokumen </iteme>
</head>
<body>
<able>
<th colspan = "3"> Klik untuk mengganti konten </t>
<tr>
<td id = "id"> id </td>
<td id = "name"> nama </td>
<td> <span id = "sex"> sex </span> </td>
</tr>
<tr>
<td> 1 </td>
<td> a </td>
<td> pria </td>
</tr>
<tr>
<td> 2 </td>
<td> b </td>
<td> wanita </td>
</tr>
</boable>
<script>
// Efek Binding --- Saya tidak valid
document.geteLementById ('id'). addeventListener ('klik', f_switch, false);
document.geteLementById ('name'). addeventListener ('klik', f_switch, false);
document.geteLementById ('sex'). addeventListener ('klik', f_switch, false);
fungsi f_switch () {
// Dapatkan meja
var table = document.getElementsbyTagname ("Tabel") [0];
// Dapatkan elemen baris
var row1 = Table.rows [2];
var row2 = Table.rows [3];
// Metode 1
// Buat elemen baru untuk menyimpan data
var newrow = document.createElement ("tr");
var newHtml = newrow.innerhtml = row2.innerHtml;
var newrow2 = document.createelement ("tr");
var newHtml2 = newrow2.innerhtml = row1.innerHtml;
//mengganti
row1.innerHtml = newHtml;
row2.innerhtml = newHtml2;
// Metode 2
// Saya tidak mengerti ... kalimat berikut dapat direalisasikan
//table.AppendChild(Row1);
}
</script>
<br>
</body>
</html>