Saya ingat saya mengalami masalah seperti itu saat wawancara: Ada formulir, lalu ada 4 kotak masukan dan tombol gabung. Kotak masukannya terlihat seperti ini, dari baris mana ke baris mana, dan dari kolom mana ke kolom mana , lalu klik tombol untuk menggabungkan. Ketika saya keluar dari sekolah, saya hanya tahu sedikit tentang JS, tetapi saya tidak bisa melakukannya sama sekali! Kalau dipikir-pikir, pertanyaan ini sebenarnya menguji apakah keterampilan dasarnya solid! Jika Anda tertarik, Anda bisa melakukannya sendiri dan menguji apakah Anda bisa melakukannya. Tangkapan layar pertanyaannya:
Mengerjakan soal ini sekarang sepertinya sederhana, tapi masih memakan waktu lama. Mungkin pemikiran saya salah? Yang utama adalah menggunakan js untuk mengoperasikan html. Saya sekarang telah menerapkan penambahan baris, penghapusan baris, penambahan kolom, dan penghapusan kolom. Namun, penggabungan sel tidak dapat sepenuhnya dilakukan, terutama karena tabel akan kacau. Sekarang posting pertanyaan ini, rekan-rekan yang tertarik dapat mempelajarinya ketika mereka punya waktu dan melihat apakah mereka dapat melakukannya! Masalahnya terutama adalah penggabungan sel! Anda juga dapat membantu saya memecahkan masalah penggabungan sel.
Bagian dari kode yang saya terapkan sendiri:
Bagian html menulis
Copy kode kodenya sebagai berikut:
<tubuh onLoad="init();">
<tabel id="tabel" align="center">
<tbody id="newbody"></tbody>
</tabel>
<div>
<tabel align="tengah">
<tr><td align="center"><input type="button" id="addRow" name="addRow" onClick="addRow();" value="Tambahkan baris"/></td>
<td align="center"><input type="button" id="delRow" name="delRow" onClick="removeRow();" value="Hapus baris"/></td>
</tr>
<tr><td align="center"><input type="button" id="delCell" name="delCell" onClick="removeCell();" value="Hapus kolom"/></td>
<td align="center"><input type="button" id="addCell" name="addCell" onClick=" addCell();" value="Tambahkan kolom"/></td>
</tr>
<tr><td align="center" colspan="2"><input type="button" id="addRows" name="addRows" onClick="addRow_withInsert();" value="Tambahkan baris"/>< /td></tr>
</tabel>
</div>
<div>
<tabel align="tengah">
<tr><td>Dari baris <input type = "text" id = "beginRow" name = "beginRow" value = ""/> ke nilai <input type = "text" name = "endRow" id = "endRow" =""/> baris</td><td rowpan="2" id="test"><input type="button" name="hebing" id="hebing" value="Gabungkan" onClick="rebulid();"/> </td></tr>
<tr><td>Dari kolom <input type = "text" name = "beginCol" id = "beginCol" value = ""/> ke nilai <input type = "text" name = "endCol" id = "endCol" =""/> kolom</td></tr>
</tabel>
</div>
</tubuh>
Hasilkan tabel menggunakan appendChild tulis
Copy kode kodenya sebagai berikut:
fungsi init(){
_table=document.getElementById("tabel");
_table.border="1px";
_table.width="800px";
untuk(var i=1;i<10;i++){
var baris=document.createElement("tr");
baris.id=i;
untuk(var j=1;j<6;j++){
var sel=document.createElement("td");
sel.id =i+"/"+j;
sel.appendChild(document.createTextNode ("th"+cell.id+"kolom"));
row.appendChild (sel);
}
document.getElementById("newbody").appendChild (baris);
}
}
Untuk menambahkan baris, tulis menggunakan metode appendChild
Copy kode kodenya sebagai berikut:
fungsi addRow(){
var length=document.getElementById("tabel").rows.length;
/*document.getElementById("badan baru").insertRow(panjang);
document.getElementById(panjang+1).setAttribute("id",panjang+2);*/
var tr=dokumen.createElement("tr");
tr.id=panjang+1;
var td=dokumen.createElement("td");
untuk(i=1;i<4;i++){
td.id=tr.id+"/"+i;
td.appendChild(document.createTextNode("th"+td.id+"kolom"));
tr.appendChild(td);
}
document.getElementById("newbody").appendChild (tr);
}
Cara lain untuk menambahkan baris insertRow aja
Copy kode kodenya sebagai berikut:
fungsi addRow_withInsert(){
varrow=document.getElementById("table").insertRow( document.getElementById("table").rows.length);
var rowCount =document.getElementById("tabel").rows.length;
var countCell=document.getElementById("tabel").rows.item(0).cells.length;
untuk(var i=0;i<countCell;i++){
var sel=baris.insertCell(i);
sel.innerHTML="baru"+(jumlah baris)+"/"+(i+1)+"kolom";
sel.id=(Jumlah baris)+"/"+(i+1);
}
}
Untuk menghapus satu baris, gunakan deleteRow(row Index) aja
Copy kode kodenya sebagai berikut:
/*Hapus baris menggunakan deleteRow(Indeks baris)*/
fungsi hapusRow(){
/* var baris=dokumen.getElementById("2");
var indeks=baris.rowIndex;
peringatan(indeks);*/
document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("table").rows.length).rowIndex);
}
Untuk menambahkan kolom, gunakan metode insertCell (posisi kolom) untuk menulis
Copy kode kodenya sebagai berikut:
fungsi addCell(){
/*document.getElementById("tabel").baris.item(0).sel.panjang
Digunakan untuk mendapatkan jumlah kolom dalam tabel
*/
for(var i=0;i<document.getElementById("table").rows.length;i++){
var sel=document.getElementById("tabel").baris[i].insertCell(2);
cell.innerHTML="Kolom "+(i+1)+"/"+3+";
}
}
Untuk menghapus kolom, gunakan metode deleteCell (posisi kolom) untuk menulis
Copy kode kodenya sebagai berikut:
/*Menghapus kolom menggunakan metode deleteCell(posisi kolom)*/
fungsi hapusSel(){
for(var i=0;i<document.getElementById("table").rows.length;i++){
document.getElementById("tabel").baris[i].deleteCell(0);
}
}
Gabungkan sel (tidak diimplementasikan) aja
Ada masalah dengan kode saya, terutama karena tabelnya akan kacau, dan belum diperbaiki:
Copy kode kodenya sebagai berikut:
fungsi dibangun kembali(){
var BeginRow=document.getElementById("beginRow").value;/*Mulai baris*/
var endRow=document.getElementById("endRow").value;/*Akhir baris*/
var BeginCol=document.getElementById("beginCol").value;/*begin kolom*/
var endCol=document.getElementById("endCol").value;/*Akhir kolom*/
var tempCol=beginRow+"/"+beginCol;/*Temukan kolom yang atributnya ingin Anda ubah*/
peringatan(Kol Temp);
var td=dokumen.getElementById(tempCol);
/*Menghapus sel yang akan digabungkan*/
untuk(var x=beginRow;x<=endRow;x++){
untuk(var i=beginCol;i<=endCol;i++){
jika(x==beginRow){
document.getElementById("tabel").baris[x].deleteCell(i+1);
}
kalau tidak{
document.getElementById("tabel").baris[x].deleteCell(i);
}
}
}
td.rowSpan=(endRow-beginRow)+1;
}