การใช้ radio button โชว์และซ่อน table จัดทำโดย : Zerohate พิมพ์
 ซ่อนและโชว์ table ด้วย radio button

วันนี้ผมมีหลักการโชว์และซ่อน table โดยผ่านการควบคุมด้วย radio button และ ใช้ javascript เพื่อทำการ โชว์และซ่อน table

ขั้นตอนการทำ

1.สร้างไฟล์ demo.html ขึ้นมา จากนั้นสร้าง radio button และ table มาอย่างละ 2 อัน

<input name="show" type="radio" value="1" onclick="show_table(this.value);"> //เรียกใช้ function show_table
show table 1
<input name="show" type="radio" value="2" onclick="show_table(this.value);"> //เรียกใช้ function show_table
show table 2</p>
<table width="150" border="1" cellpadding="0" cellspacing="0" id="table_1" style="display:none"> //ตั้งชื่อให้กับ table แต่ทำการซ่อนไว้
<tr>
<td align="center">แสดงข้อมูล table 1 </td>
</tr>
</table>
<br>
<table width="150" border="1" cellpadding="0" cellspacing="0" id="table_2" style="display:none"> //ตั้งชื่อให้กับ table แต่ทำการซ่อนไว้
<tr>
<td align="center">แสดงข้อมูล table 2 </td>
</tr>
</table>

2.ทำการเขียน function javascript ไว้ส่วนของ <head></head> เพื่อใช้ทำงานก่อน ซ่อน และ โชว์ table

<script language="javascript">
function show_table(id) {
if(id == 1) { // ถ้าเลือก radio button 1 ให้โชว์ table 1 และ ซ่อน table 2
document.getElementById("table_1").style.display = "";
document.getElementById("table_2").style.display = "none";
} else if(id == 2) { // ถ้าเลือก radio button 2 ให้โชว์ table 2 และ ซ่อน table 1
document.getElementById("table_1").style.display = "none";
document.getElementById("table_2").style.display = "";
}
}
</script>

3.ไม่ยากเลยใช่ไหม ลองเอาไปประยุกต์ดูนะครับ สามารถทำไรได้อีกเยอะเลย




คลิกดูตัวอย่าง

คุณอาจสนใจ
ครอปส่วนที่ต้องการบนรูปภาพด้วย Photoshop 7
Ching Ching (133,256 - 04 เม.ย. 51)
ป้องกันรีจิสทรีจากพวกมือซน
เว็บไทยดีดี (14,274 - 22 ก.ย. 50)
การเขียน โปรแกรมสร้าง Link List ด้วยภาษา C
langjuko (55,232 - 19 ก.ย. 51)
การเลือกข้อมูลให้เหมาะสมกับการใช้งาน
Mr.N (22,799 - 30 เม.ย. 50)
MSN block Checker ใครบล๊อกเราสามารถเช็คได้
เว็บไทยดีดี (69,852 - 10 พ.ค. 51)
FreeCommander สำหรับคนเบื่อ Windows Explorer
เว็บไทยดีดี (13,956 - 22 ก.ย. 50)
แอลซีดี ทีวี รุ่นใหม่ดีกว่าอย่างไร ?
สายลม (16,082 - 26 เม.ย. 51)
การสร้าง webboard ตอนที่ 2 (config.inc.php)
Mr.GuruZ (109,689 - 03 มิ.ย. 49)