logo

Crowdly

Browser

Додати до Chrome

\n \n \n \n \n \n \n \n \n \n \n \n \n \n
NamaNIMJurusan
\n \n \n \n \n   \n Anda diminta untuk memodifikasi potongan kode di atas agar bisa menampilkan data mahasiswa jika tombol \"Tampilkan data mahasiswa\" diklik. Namun, jika tombol \"Sembunyikan data mahasiswa\" diklik, maka data mahasiswa akan disembunyikan. \n Anda dapat menggunakan jQuery Effect method show() dan hide() . \n $( \"#hide\" ). click ( function (){ \n   $( \"p\" ). hide (); \n }); \n \n $( \"#show\" ). click ( function (){ \n   $( \"p\" ). show (); \n }); \n Contoh dummy JSON data mahasiswa: \n [ \n { \n \"nama\": \"Budi Santoso\", \n \"nim\": \"123456\", \n \"jurusan\": \"Teknik Informatika\", \n \"angkatan\": 2020, \n \"email\": \"[email protected]\" \n }, \n { \n \"nama\": \"Siti Nurhaliza\", \n \"nim\": \"654321\", \n \"jurusan\": \"Sistem Informasi\", \n \"angkatan\": 2019, \n \"email\": \"[email protected]\" \n }, \n { \n \"nama\": \"Agus Pratama\", \n \"nim\": \"112233\", \n \"jurusan\": \"Teknik Elektro\", \n \"angkatan\": 2021, \n \"email\": \"[email protected]\" \n }, \n { \n \"nama\": \"Indah Permata\", \n \"nim\": \"334455\", \n \"jurusan\": \"Teknik Sipil\", \n \"angkatan\": 2020, \n \"email\": \"[email protected]\" \n }, \n { \n \"nama\": \"Rizki Ramadhan\", \n \"nim\": \"556677\", \n \"jurusan\": \"Arsitektur\", \n \"angkatan\": 2021, \n \"email\": \"[email protected]\" \n }, \n { \n \"nama\": \"Wahyu Putra\", \n \"nim\": \"778899\", \n \"jurusan\": \"Teknik Industri\", \n \"angkatan\": 2019, \n \"email\": \"[email protected]\" \n } \n ] \n   \n Contoh output : \n   \n \n    ","item":"https://crowdly.sh/uk/question/71331199005b254333da40255431d5a2501851bf2e48ea906755f53b4c305957/"}]}]}

Perhatikan potongan kode di bawah ini. <!DOCTYPE html> <html> <head><meta ...

✅ Перевірена відповідь на це питання доступна нижче. Наші рішення, перевірені спільнотою, допомагають краще зрозуміти матеріал.

Perhatikan potongan kode di bawah ini.

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Soal Esai UTS PBP</title>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button>Tampilkan Data Mahasiswa</button>
<button style="display:none;">Sembunyikan Data Mahasiswa</button>

<table id="mahasiswaTable" style="display:none; border: 1px solid black; width: 100%;">
 <thead>
 <tr>
 <th>Nama</th>
 <th>NIM</th>
 <th>Jurusan</th>
 </tr>
 </thead>
 <tbody></tbody>
</table>

<script>
 $(document).ready(function(){
 // Fungsi untuk mengambil data mahasiswa dari API
 function fetchDataMahasiswa() {
 fetch('https://dummyjson.com/c/6bdb-4683-486b-aeec') // ...
 .then(response => response.json()) // ...
 .then(data => {
 // ...
 $('#mahasiswaTable tbody').empty();

// ...
 data.forEach(mahasiswa => {
 $('#mahasiswaTable tbody').append(`
 //Tambahkan potongan kode untuk menampilkan data mahasiswa
 `);
 });
 })
 .catch(error => {
 console.error('Error fetching data:', error);
 });
 }

// Tambahkan potongan kode Event handler untuk tombol "Tampilkan Data Mahasiswa"

// Tambahkan potongan kode Event handler untuk tombol "Sembunyikan Data Mahasiswa"
 
 });
</script>

</body>
</html>

 

Anda diminta untuk memodifikasi potongan kode di atas agar bisa menampilkan data mahasiswa jika tombol "Tampilkan data mahasiswa" diklik. Namun, jika tombol "Sembunyikan data mahasiswa" diklik, maka data mahasiswa akan disembunyikan.

Anda dapat menggunakan jQuery Effect method show() dan hide().

$("#hide").click(function(){
  $("p").hide();
});
$("#show").click(function(){
  $("p").show();
});

Contoh dummy JSON data mahasiswa:

[
 {
 "nama": "Budi Santoso",
 "nim": "123456",
 "jurusan": "Teknik Informatika",
 "angkatan": 2020,
 "email": "[email protected]"
 },
 {
 "nama": "Siti Nurhaliza",
 "nim": "654321",
 "jurusan": "Sistem Informasi",
 "angkatan": 2019,
 "email": "[email protected]"
 },
 {
 "nama": "Agus Pratama",
 "nim": "112233",
 "jurusan": "Teknik Elektro",
 "angkatan": 2021,
 "email": "[email protected]"
 },
 {
 "nama": "Indah Permata",
 "nim": "334455",
 "jurusan": "Teknik Sipil",
 "angkatan": 2020,
 "email": "[email protected]"
 },
 {
 "nama": "Rizki Ramadhan",
 "nim": "556677",
 "jurusan": "Arsitektur",
 "angkatan": 2021,
 "email": "[email protected]"
 },
 {
 "nama": "Wahyu Putra",
 "nim": "778899",
 "jurusan": "Teknik Industri",
 "angkatan": 2019,
 "email": "[email protected]"
 }
]

 

Contoh output:

 

  

Більше питань подібних до цього

Хочете миттєвий доступ до всіх перевірених відповідей на scele.cs.ui.ac.id?

Отримайте необмежений доступ до відповідей на екзаменаційні питання - встановіть розширення Crowdly зараз!

Browser

Додати до Chrome

TelegramInstagramTikTokQuestion Bank
Умови використанняЗв'яжіться з нами