Postingan lainnya

bagaimana menampilkan option edit dan hapus dengan javascript dan php?

ada yang tau gak gimana cara menampilkan dan menyembunyikan tombol edit dan hapus ketika tombol [.] disebelah kiri nama di klik, saya sudah coba pakai javascript ketika saya klik nama paling bawah, pilihan edit dan hapus justru muncul di nama yang paling atas, saya ingin nama mana saja yang saya klik pilihan edit dan hapus muncul di barisan nama tersebut, yang master tolong bantuin plisss, terimakasih

php

@Adnan94

9 Kontribusi 3 Poin

Diperbarui 8 tahun yang lalu

7 Jawaban:

pakai jquery tiap tombol click di kasih id yang sama dengan edit/hapus. jadi nanti klo tombol titik di click tingal pakai

$($(this).attr('id')).toggle();

@ardyhim

289 Kontribusi 175 Poin

Dipost 8 tahun yang lalu

agak kurang paham gan, mungkin bisa ditunjukkan kode htmlnya. biar bisa dilihat tombol edit dan hapusnya dinamis atau statis. karena ini cukup banyak hal yang harus dicek dulu. apakah tombol [.] sudah punya parameter yang akan dioper atau belum? apakah tombol edit dan hapusnya sudah dinamis berdasarkan namanya atau belum.

@onirusama

265 Kontribusi 184 Poin

Dipost 8 tahun yang lalu

ini source code htmlnya, MOHON PENCERAHANNYA MASTER! :)

    	<?php include 'connection.php';
		$query = mysql_query("select * from test order by user_id desc");
		while($data = mysql_fetch_array($query)){
			echo "<div style='border-bottom:1px #999 solid; padding:5px;' class='div'>

				<div style='width:auto; float:right; display:none;' id='option'>
				<button class='button' style='width:auto;'>Edit</button>
				<button class='button' style='width:auto;'>Hapus</button>
				</div> <button class='button' style='width:auto;' onclick='option()'>.</button>

				Nama  : $data[username] <br/>
			</div>";
		} ?>

@Adnan94

9 Kontribusi 3 Poin

Dipost 8 tahun yang lalu

dan ini source code javascriptnya, mohon bantuannya

function option(){
	op = document.getElementById("option");
	if(op.style.display == "none"){op.style.display = "block"}
	else{op.style.display = "none"}
}

@Adnan94

9 Kontribusi 3 Poin

Dipost 8 tahun yang lalu

dari html agan memang tidak ada parameter yang agan oper di bagian buttonnya.

<button class="button">.</button> #ini button pemicunya akan disebut BUTTON_1

<div id="option">bla bla bla</div> #ini kontainer yang akan muncul disebut BUTTON_2

1. berikan selektor spesifik pada BUTTON_1. caranya bisa dengan menambahkan id atau tambahkan class baru yang nilainya (untuk kasus ini) kita pakai user_id dari database agan.

<button id='$data[user_id]' class='button' style='width:auto;'>.</button> #silahkan hapus saja onclick=option

2. berikan juga selektor spesifik pada kontainer BUTTON_2. dan class

<div style='width:auto; float:right; display:none;' id='option_$data[user_id]' class='all_option'>
</div>

sampai sini semestinya BUTTON_1 dan BUTTON_2 itu sudah memiliki id yang dinamis, silahkan cek dulu dengan inspect element. kalau sudah berhasil maka lanjut ke javascriptnya. kalau belum silahkan cek kembali kodenya.

@onirusama

265 Kontribusi 184 Poin

Dipost 8 tahun yang lalu

selanjutnya javascript, sy pakai jquery:

$(document).ready(function(){
  $(document).on('click', '.button', function(){
    var id = $(this).attr('id'); //disini kita mengambil id BUTTON_1 yang diklik
    $('.all_option').fadeOut();
    $('#option_'+id).fadeIn(); //memunculkan kontainer BUTTON_2 berdasarkan idnya
  });
})

silahkan dikembangkan lebih lanjut.

@onirusama

265 Kontribusi 184 Poin

Dipost 8 tahun yang lalu

wow, berhasil , terimakasih onirusama, terimakasih master ^__^ terimakasih semuanya yang bersedia membantu.

@Adnan94

9 Kontribusi 3 Poin

Dipost 8 tahun yang lalu