Untitled






















<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Data Diri</title>
	<style type="text/css">
	</style>
</head>
<body>
	<form>
		<input type="text" placeholder="Cari Nama" id="fnama" /> <input type="button" value="Cari" onclick="cari()"><br/><br/>
		<input type="text" placeholder="Nama" id="nama" /><br/><br/>
		<input type="text" placeholder="Kelas" id="kelas" /><br/><br/>
		<input type="button" value="Simpan" onclick="simpan()"> 
		<input type="button" value="Hapus" onclick="hapus()">
	</form><br/>
	<table border="1px">
		<thead>
			<tr>
				<th>Nama</th><th>Kelas</th>
			</tr>
		</thead>
		<tbody id="data">
			<!-- <tr>
				<td>Nama</td><td>Alamat</td>
			</tr> -->
		</tbody>
	</table>
	<script>
		let arrSiswa = []
		tampil()
		function tampil() {
			let text = ""
			for (let x in arrSiswa) {
			 	text += "<tr><td>"+arrSiswa[x][0]+"</td><td>"+arrSiswa[x][1]+"</td></tr>"
			}
			document.getElementById("data").innerHTML = text
		}

		function simpan() {
			let nama = document.getElementById("nama").value
			let kelas = document.getElementById("kelas").value
			arrSiswa.push([nama, kelas])
			tampil()
		}

		function cekNama(nama) {
			for (let x in arrSiswa) {
				if (arrSiswa[x][0] == nama) {
					return arrSiswa[x]
				}
			}
  			return false;
		}

		function hapus() {
			let nama = document.getElementById("fnama").value
			for (let x in arrSiswa) {
				if (arrSiswa[x][0] == nama) {
					arrSiswa.splice(x, 1);
					break;
				}
			}
			tampil()
		}

		function cari() {
			let nama = document.getElementById("fnama").value
			let hasil = cekNama(nama)
			if (hasil) {
				document.getElementById("nama").value = hasil[0] 
				document.getElementById("kelas").value = hasil[1] 
			} else {
				alert("Data yang kamu cari tidak ada");
			}
			console.log(hasil);
		}
	</script>
</body>
</html>
Editor is loading...