Javascript menyedari menukar nilai dalam kemahiran td_javascript

Semasa saya menemu duga bahagian hadapan, saya menemui soalan temu duga pada masa itu, jadi saya tidak menjawabnya Hari ini saya menyelesaikannya dan berkongsi dengan semua orang:

Soalan asal ialah: Gunakan kaedah objek untuk mencipta jadual 2x2, memerlukan butang dalam sel baris kedua dan lajur kedua Apabila butang ini diklik, nilai baris pertama dan lajur pertama akan menjadi sama seperti yang kedua Tukar nilai dalam lajur pertama baris, lihat gambar di bawah

Buat borang

Kesan klik

Saya bodoh, jika anda mempunyai kaedah yang lebih baik, sila beritahu saya setelah memikirkannya untuk masa yang lama, saya akhirnya mendapat beberapa keputusan:

1. Cipta objek jadual

Salin kod Kod adalah seperti berikut:

Dokumen

jadual td{text-align: center;}

Gunakan objek untuk mencipta jadual

var table={
Nilai1:"nilai1",
Nilai2:"nilai2",
Baris:2,
Sel:2,
​ create:function(){
//Buat jadual
      var table=document.createElement("table");
        table.border=1;
        table.width="500"; //Buang butang
        var button=document.createElement("button"); ​​​​button.innerHTML="Tukar";
           butang.name="qiehuan";
​​​​ button.setAttribute("onclick","qiehuan()");
//Buat baris
for(var i=0;i              table.insertRow();
}
​​​​ //Buat lajur
for(var i=0;i              table.rows[i].insertCell();
             table.rows[i].insertCell();
           }
//Tambahkan jadual pada badan
Document.body.appendChild(table);
var table=document.getElementsByTagName("jadual")[0];
var row1=table.rows[0];
var row2=table.rows[1];
table.rows[1].cells[1].appendChild(butang);
var a=row1.cells[0].innerHTML=this.value1;
var b=row2.cells[0].innerHTML=this.value2;
}
}
table.create();

Kesan yang dicapai oleh kaedah penciptaan jadual ialah:

Klik untuk menukar kod:

Salin kod Kod adalah seperti berikut:

fungsi qiehuan(){
//Dapatkan jadual
var table=document.getElementsByTagName("jadual")[0];
//Dapatkan tr
var row1=table.rows[0];
var row2=table.rows[1];
//Tukar kandungan
//Buat elemen baharu 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;

}

Kesan daripada mengklik butang suis ialah:

Sambungan:

1. Saya mahu menukar pengisihan dengan mengklik pada id/nama/jantina:

Asal

Kesan

kod:

Salin kod Kod adalah seperti berikut:

Dokumen







                                                                                                                                                      



                                                            



                                                            

Klik untuk menggantikan kandungan
id	name
1	a
2	b

//Kesan pengikat---tidak sah di bawah iaitu
Document.getElementById('id').addEventListener('click', f_switch, false);
Document.getElementById('name').addEventListener('click', f_switch, false);
Document.getElementById('sex').addEventListener('click', f_switch, false);
Fungsi f_switch(){
//Dapatkan jadual
var table=document.getElementsByTagName("jadual")[0];
//Dapatkan elemen baris
var row1=table.rows[2];
var row2=table.rows[3];
//Kaedah 1
//Buat elemen baharu 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;
//Ganti
row1.innerHTML=newhtml;
row2.innerHTML=newhtml2;
//Kaedah 2
//Saya tidak faham....Ayat berikut boleh mencapainya
//table.appendChild(row1);
}