Artikel ini menjelaskan bagaimana JS mengimplementasikan penambahan dinamis, penghapusan dan pembaruan tabel. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> Operasi tabel </iteme>
<type style = "text/css">
tubuh {
font-size: 13px;
Line-Height: 25px;
}
meja {
Border-top: 1px solid #333;
Border-Bottom: 1px Solid #333;
Lebar: 300px;
}
td {
Border-Right: 1px Solid #333;
Border-Bottom: 1px Solid #333;
}
.judul {
Teks-Align: tengah;
font-weight: tebal;
Latar Belakang: #CCC;
}
.tengah {
Teks-Align: tengah;
}
#displayInfo {
Warna: Merah;
}
</tyle>
<type skrip = "Teks/JavaScript">
fungsi addRow () {// tambahkan satu baris
var tableObj = document.getElementById ('mytable');
var rownums = Tableobj.rows.length;
var newrow = Tableobj.InserTrow (rownums);
var col1 = newrow.insertcell (0);
col1.innerhtml = "kebahagiaan jatuh dari langit";
var col2 = newrow.insertcell (1);
col2.innerhtml = "$ 18,5";
col2.align = "center";
var divinfo = document.geteLementById ('displayInfo');
divinfo.innerhtml = "Tambahkan produk berhasil";
}
function delrow () {// hapus baris kedua
document.geteLementById ('mytable'). deleterow (1);
var divinfo = document.geteLementById ('displayInfo');
divinfo.innerhtml = "hapus produk berhasil";
}
function updaterow () {// Perbarui informasi baris
var urow = document.geteLementById ('mytable'). baris [0];
urow.classname = "title";
}
</script>
</head>
<body>
<tabel cellpadding = "0" cellPacing = "0" id = "mytable">
<tr id = "row1">
<td> judul buku </td>
<td> Harga </td>
</tr>
<tr id = "row2">
<td> Kamar dengan pemandangan </td>
<td> $ 30,00 </td>
</tr>
<tr id = "row3">
<td> 60 momen </td>
<td> $ 32,00 </td>
</tr>
</boable>
<input name = "b1" type = "Tombol" value = "Tambahkan satu baris" OnClick = "JavaScript: addRow ();" /> <br />
<input name = "b2" type = "tombol" value = "hapus baris kedua" onclick = "javascript: delrow ();" /> <br />
<input name = "b3" type = "tombol" value = "ubah judul" onclick = "JavaScript: updaterow ();" /> <br />
<Div ID = "DisplayInfo"> </div>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.