Gambar reproduksi:
Kode:
JS Tambahkan Data Tabel_2.html secara dinamis
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<Title> JS secara dinamis menambahkan implementasi tabel data_2 menggunakan metode InserTrow dan InsertCell </iteme>
<type skrip = "Teks/JavaScript">
var mailarr = [
{"Judul": "A C# Problem", "Name": "Zhang San", "Date": "2014-03-21"},
{"title": "A JavaScript Problem", "Name": "Li Si", "Date": "2014-03-21"},
{"title": "a c question", "name": "55", "date": "2014-03-21"},
{"Judul": "Pertanyaan C ++", "Nama": "Zhao Liu", "Date": "2014-03-21"}
];
var tab = null;
window.onload = function () {
loadtab ();
// Pilih semua
document.geteLementById ("sela"). onclick = function () {
if (document.geteLementById ("sela"). checked == true) {
seleall (tab, true);
} kalau tidak {
seleall (tab, false);
}
};
// Hapus semua yang dipilih
document.geteLementById ("delsel"). onclick = function () {
// Transfer semua kontrol input (kecuali kotak centang terakhir yang dipilih)
var chks = document.geteLementsbyTagname ('input');
untuk (var i = chks.length-2; i> = 0; i--) {
var chk = chks [i];
if (chk.checked == true) {
// Pilih Pemrosesan Penghapusan Baris
var rownow = chk.parentnode.parentnode;
rownow.parentnode.removechild (rownow);
} kalau tidak {
waspada ("benar -benar");
}
}
};
};
fungsi loadtab () {
tab = document.getElementById ("tb");
// Tambahkan metode traversal loop Mailarr ke tabel di TR
untuk (var rowIndex = 0; rowIndex <mailarr.length; rowIndex ++) {
// var tr = tab.insertrow (-1); //-1 mengacu pada baris terakhir
var tr = tab.insertrow (tab.rows.length - 1); // Masukkan ke dalam dua baris terakhir, dan baris terakhir harus disimpan untuk garis yang dipilih semua.
var td1 = tr.insertcell (-1);
td1.innerHtml = "<input type = 'centang kotak'/>";
var td2 = tr.insertcell (-1);
td2.innerhtml = mailarr [rowindex] .title;
var td3 = tr.insertcell (-1);
td3.innerhtml = mailarr [rowindex] .name;
var td4 = tr.insertcell (-1);
td4.innerHtml = mailarr [rowindex] .date;
}
}
// Untuk membuat tombol pilih semua mulai berlaku, Anda perlu melintasi semua baris tabel
fungsi seleall (mailtab, issel) {
untuk (var i = 0; i <mailtab.rows.length; i ++) {
var tr = mailtab.rows [i];
Tr.Cells [0] .Childnodes [0] .Checked = Issel;
}
}
</script>
</head>
<body>
<tabel id = "tb" style = "border-collapse: collapse;">
<tr>
<th> urutan </t>
<th> judul </t>
<th> Kirim Mailer </t>
<t th> Kirim waktu </t>
</tr>
<!-Loop meningkat->
<!-Pilih semua->
<tr>
<td colspan = "4">
<input id = "sela" type = "centang kotak" /> <label untuk = "sela"> pilih semua </label>
<a href = "#" id = "delsel"> hapus </a> </td>
</tr>
</boable>
</body>
</html>