logo

Crowdly

Browser

Add to 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://www.crowdly.sh/en/question/71331199005b254333da40255431d5a2501851bf2e48ea906755f53b4c305957/"}]}]}

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

✅ The verified answer to this question is available below. Our community-reviewed solutions help you understand the material better.

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:

 

  

More questions like this

Want instant access to all verified answers on scele.cs.ui.ac.id?

Get Unlimited Answers To Exam Questions - Install Crowdly Extension Now!

Browser

Add to Chrome