Cara membuat tabel dalam javascript (dua cara menggambar tabel dalam javascript)

Penulis：Eve Cole Waktu Pembaruan：2025-01-28 04:00:02

1. fungsi insertRow() dan insertCell()

Fungsi insertRow() dapat mengambil parameter dalam bentuk berikut:

insertRow(index): indeks dimulai dari 0

Fungsi ini menambahkan baris baru sebelum baris indeks, seperti insertRow(0), yang menambahkan baris baru sebelum baris pertama. Fungsi default insertRow() setara dengan insertRow(-1), yang menambahkan baris baru ke akhir tabel. Umumnya saat kita menggunakannya: objTable.insertRow(objTable.rows.length). Ini untuk menambahkan baris baru di akhir tabel objTable.

Penggunaan insertCell() dan insertRow sama dan tidak akan dibahas di sini.

2. metode deleteRow() dan deleteCell()

Fungsi deleteRow() dapat mengambil parameter, bentuknya sebagai berikut: deleteRow(index): indeks dimulai dari 0

Arti yang sama dengan kedua cara di atas adalah menghapus baris dan sel pada posisi yang ditentukan. Parameter yang akan diteruskan: Indeks adalah posisi baris dalam tabel. Dapat diperoleh dengan metode berikut dan kemudian dihapus:

Copy kode kodenya sebagai berikut:

var baris=document.getElementById("Id baris");

var index=row.rowIndex;//Ada atributnya, hehe

objTable.deleteRow(indeks);

Izinkan saya memberi tahu Anda tentang masalah yang saya temui saat menggunakan. Saat menghapus baris dalam sebuah tabel, jika Anda menghapus baris tertentu, jumlah baris dalam tabel akan segera berubah kode berikut ini salah:

Copy kode kodenya sebagai berikut:

fungsi clearRow(){

objTable= document.getElementById("Tabel Saya");

untuk( var i=1; i<objTable.baris.panjang ; i++ )

{

tblObj.deleteRow(i);

}

Kode ini ingin menghapus isi tabel dari tabel asli. Ada dua masalah. Pertama-tama, tidak boleh deleteRow(i), harus deleteRow(1). Karena saat menghapus baris tabel, jumlah baris dalam tabel berubah. Ini adalah kunci masalahnya. Panjang baris selalu semakin kecil, dan jumlah baris yang dihapus selalu kurang dari setengah dari yang diharapkan. hapus tabel dengan benar. Baris kodenya akan terlihat seperti ini:

Copy kode kodenya sebagai berikut:

fungsi clearRow(){

objTable= document.getElementById("Tabel Saya");

var panjang= objTable.baris.panjang;

untuk(var i=1; i<panjang; i++)

{

objTable.deleteRow(i);

}

3. Mengatur properti sel dan baris secara dinamis

A. Gunakan metode setAttribute() dengan format berikut: setAttribute(atribut, nilai atribut)

Catatan: Metode ini dapat digunakan untuk hampir semua objek DOM. Parameter pertama adalah nama atribut, misalnya: border, dan parameter kedua adalah nilai yang ingin Anda tetapkan untuk border, misalnya: 1

Copy kode kodenya sebagai berikut:

var objMyTable = document.getElementById("MyTable");

objMyTable.setAttribute("border",1);//Tetapkan batas ke 1 untuk tabel

Untuk hal lain, misalnya jika Anda ingin mengatur ketinggian TD, Anda juga perlu mendapatkan objek TD terlebih dahulu, lalu menggunakan metode setAttribute().

Copy kode kodenya sebagai berikut:

var objCell = document.getElementById("MyCell");

objCell.setAttribute("height",24);//Setel tinggi sel menjadi 24

Saya mengalami masalah dengan pengaturan gaya saat menggunakannya. Anda tidak dapat menggunakan setAttribute("class","inputbox2"); sebagai gantinya, Anda harus menggunakan setAttribute("className","inputbox2"). , beberapa Atributnya tidak sesuai dengan yang kita punya di DW, haha, yuk kita telusuri sendiri.

B. Penugasan langsung

Copy kode kodenya sebagai berikut:

var objMyTable = document.getElementById("MyTable");

objMyTable.border=1;//Tetapkan batas ke 1 untuk tabel

Cara ini juga berlaku untuk semua, haha.

4. Buat tabel

Setelah Anda memahami penambahan dan penghapusan baris <tr> dan sel <td>, Anda dapat membuat tabel.

Langkah 1: Anda harus memiliki tabel yang ingin Anda ubah secara dinamis. Yang saya bicarakan di sini adalah tabel yang sudah ada di halaman tersebut.

Copy kode kodenya sebagai berikut:

var objMyTable = document.getElementById("MyTable");

Langkah 2: Buat objek baris dan kolom

Copy kode kodenya sebagai berikut:

var indeks = objMyTable.rows.length-1;

var nextRow = objMyTable.insertRow(index);//Baris yang akan ditambahkan ditambahkan dari baris kedua hingga terakhir.

//Nomor kotak sel

var newCellCartonNo = nextRow.insertCell();

var cartonNoName = "IptCartonNo";

newCellCartonNo.innerHTML = "<tipe input='teks' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";

newCellCartonNo.setAttribute("className","tablerdd");

Itu saja, Anda cukup membuat baris dan kolom. Saya telah memposting kode spesifik di bawah ini. Itu hanya contoh yang sangat sederhana, tapi caranya mungkin seperti di atas. Haha, mari kita telusuri perlahan~

Copy kode kodenya sebagai berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Blu-ray-BlueShine</title>

var Hitungan=salah,TIDAK=1;

fungsi addRow(){

Hitung=!Hitung;

//Tambahkan satu baris

var newTr = testTbl.insertRow(testTbl.rows.length);

//Tambahkan dua kolom

var newTd0 = newTr.insertCell();

var newTd1 = newTr.insertCell();

var newTd2 = newTr.insertCell();

//Mengatur konten dan atribut kolom

if(Hitungan){newTr.style.background="#FFE1FF";}

lain {newTr.style.background="#FFEFD5";}

newTd0.innerHTML = '<tipe masukan=kotak centang id="kotak4">';

TIDAK++

newTd1.innerText="Baris "+TIDAK+";

}

</skrip>

</kepala>

<tubuh>

<td>Baris 1</td>

</tr>

</tabel>

<label>

</label>

</tubuh>

</html>

5. metode appendChild()

Copy kode kodenya sebagai berikut:

<html>

<title>Halaman Pengujian Saya</title>

<!--

var nomor teks = 1;

fungsi addTextBox(form, afterElement) {

// Menambah nomor kotak teks

nomor teks++;

//Buat labelnya

var label = dokumen.createElement("label");

//Buat kotak teks

var textField = dokumen.createElement("input");

textField.setAttribute("ketik","teks");

textField.setAttribute("nama","txt"+nomorteks);

textField.setAttribute("id","txt"+nomorteks);

// Tambahkan teks label

label.appendChild(document.createTextNode("Kotak Teks #"+textNumber+": "));

// Masukkan kotak teks ke dalamnya

label.appendChild(textField);

// Tambahkan semuanya ke formulir

form.insertBefore(label,afterElement);

kembali salah;

}

fungsi hapusKotak Teks(formulir) {

if (textNumber > 1) {// Jika ada lebih dari satu kotak teks

// Hapus yang terakhir ditambahkan

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

nomor teks--;

}

//-->

</skrip>

<!--

label {

tampilan:blok;

margin:.25em 0em;

}

-->

</gaya>

</kepala>

<tubuh>

<label>Kotak Teks #1: <input type="text" name="txt1" id="txt1" /></label>

<p>

</p>

</bentuk>

</tubuh>

</html>

<html>

<title>Halaman Pengujian Saya</title>

<!--

var nomor teks = 1;

fungsi addTextBox(form, afterElement) {

// Menambah nomor kotak teks

nomor teks++;

//Buat labelnya

var label = dokumen.createElement("label");

//Buat kotak teks

var textField = dokumen.createElement("input");

textField.setAttribute("ketik","teks");

textField.setAttribute("nama","txt"+nomorteks);

textField.setAttribute("id","txt"+nomorteks);

// Tambahkan teks label

label.appendChild(document.createTextNode("Kotak Teks #"+textNumber+": "));

// Masukkan kotak teks ke dalamnya

label.appendChild(textField);

// Tambahkan semuanya ke formulir

form.insertBefore(label,afterElement);

kembali salah;

}

fungsi hapusKotak Teks(formulir) {

if (textNumber > 1) {// Jika ada lebih dari satu kotak teks

// Hapus yang terakhir ditambahkan

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

nomor teks--;

}

//-->

</skrip>

<!--

label {

tampilan:blok;

margin:.25em 0em;

}

-->

</gaya>

</kepala>

<tubuh>

<label>Kotak Teks #1: <input type="text" name="txt1" id="txt1" /></label>

<p>

</p>

</bentuk>

</tubuh>

</html>