WWW.CODE-FATHER.COM ยินดีต้อนรับทุกๆท่าน

บทความทั้งหมด วิธีใช้งานโปรแกรม PHP CODE FATHER V.2016 Register - ลงทะเบียนโปรแกรม Contact Us - ติดต่อเรา About Us - เกี่ยบกับเรา รับเขียนเว็บ โปรเจ็ค PHP vs MySQL
ติดต่อเข้ามาได้เลยนะครับ ราคากันเอง ไม่เคยทิ้งงาน
งานแก้ งานด่วน งานเร่งสอบถามกันก่อนได้ครับผม...
110308Code Login Logout Php การทำระบบล๊อกอิน ล๊อกเอ้า และป้องกันการลักไก่ แบบละเอียดที่สุด 41574Code Send Email by PHP การส่งอีเมล์ด้วย พีเอสพี 44004Captcha Security Code PHP ใส่รหัสยืนยันก่อนโพสป้องกันการสแปมเว็บเราดีกว่า 74415Php Code Insert to Mysql การเพิ่มข้อมูลใหม่เข้าสู่ฐานข้อมูล 49808PHP CODE FATHER โปรแกรมสร้างโปรเจ็ค PHP + Mysql สร้างโค้ดโปรแกรม php mysql insert update add edit delete ง่ายๆ 35960Download Free Program Php Code Father V.2010 ดาวน์โหลดโปรแกรมฟรี 33788ดาวน์โหลดคู่มือ วิธีใช้งานโปรแกรม Php Code Father V.2010 62819Function Confirm Delete JavaScript การยืนยันก่อนลบข้อมูล ง่าย ๆ แต่สำคัญ 33819PHP Function ECHO Exit ฟังก์ชั่นเล็ก ๆ ที่ไม่ธรรมดา เครื่องมือ DEBUG ชั้นยอด 12081PHP CODE FATHER V.2010 ตัวเต็ม Full ขั้นตอนการสมัครและรายละเอียดการลงทะเบียนใช้งานโปรแกรม 87099Code Search PHP In Mysql Database By Fields การค้นหาข้อมูลในฐานข้อมูล ตามชื่อฟิลด์ 30504แก้ปัญหาการใช้งานฟังก์ชั่น substr ใน php ตัดข้อความภาษาไทยแล้วกลายเป็นภาษาต่างดาว 39611การดาวน์โหลดไฟล์+เทคนิคการตั้งชื่อไฟล์เป็นภาษาไทย PHP Code Download File Thai 49233PHP Function Date Thai การแปลงวันที่จาก ค.ศ. เป็น พ.ศ. วันที่แบบไทย ๆ สำหรับคนไทย 44721การแทรก PHP ใน Javascript เรื่องกล้วย ๆ ที่อาจจะต้องได้ใช้ 41228การแทรก Javascript ใน PHP เรื่องกล้วย ๆ ที่จำเป็นต้องรู้ 56750Php Code Upload File การอัพโหลดไฟล์และการตรวจสอบประเภทของไฟล์ภาพและอื่น ๆ 15893 Single Quote SQL Query Insert update แก้ปัญหาเวลาข้อมูลที่มีเครื่องหมายฟันเดี่ยว (single quote) แล้วไม่ได้ ไม่ผ่าน 14443การใช้งานฟังก์ชั่น substring() ใน javascript และการตรวจสอบจำนวนเงินกับการสั่งซื้ออัลบั้มออนไลน์ 129294คำสั่ง sql Select from Where ,Like ,Order By ที่จำเป็นต้องใช้และต้องใช้บ่อย ๆ 52683code update php to mysql database คำสั่งปรับปรุงข้อมูลในฐานข้อมูล 50331php function number_format ใส่จุดทศนิยมและเครื่องหมายคอมม่าให้ตัวเลข เงิน 45582ง่าย ๆ php auto id การสร้างเลขที่อัตโนมัติก่อนเพิ่มข้อมูลใหม่ 57354Code Redirect URL ด้วย php และ javascript การส่งผู้ใช้ไปหน้าที่เราต้องการ 56098ง่าย ๆ การทำวันที่แบบ List ให้เลือก วัน เดืือน ปี Select Option List Date 101383Code PHP Popup การป๊อปอัพหน้าต่างใหม่โดยใช้ Javascript 57730เทคนิค...การทำให้ Textbox กรอกหรือป้อนได้เฉพาะตัวเลขด้วย Javascript ง่ายๆ 47194Step 1 สร้างเว็บบอร์ดแบบบ้านๆ ด้วย PHP Webboard Script 40147เทคนิคการแสดงและซ่อน div, table และอื่น ๆ ด้วย Javascript Show and Hide DIV or TABLE 53979Step 2 ฐานข้อมูล สร้างเว็บบอร์ดแบบบ้านๆ ด้วย PHP Webboard Script 92904ปัญหาการแสดงผลตารางบน Internet Explorer เพี้ยน Table ie7 Error 24051การเชื่อมต่อฐานข้อมูล PHP+MySQL และวิธีแก้ไขปัญหาภาษาไทยผิดเพี้ยน กลายเป็นภาษาต่างดาว 39453วิธีแก้ปัญหา Internal Server Error ตอนรัน PHP กับ Apache Server MSQL 37457แปลงตัวเลขให้เป็นตัวอักษรภาษาไทย PHP Code Thai BathText 40577php easy calculator เครื่องคิดเลขอย่างง่าย บวก ลบ คูณ หาร 34101php easy calculator with Ajax เครื่องคิดเลขอย่างง่าย บวก ลบ คูณ หาร ภาคต่อ 189400ทำระบบล๊อกอินอย่างง่าย ด้วย PHP Login with Mysql Data Base 15477Step 3 โค้ดเว็บบอร์ดแบบง่าย ๆ พร้อมใช้งาน PHP Webboard Script 45551โค้ดการเลือกจังหวัด อำเภอ ตำบล ด้วย Ajax vs Code PHP select Provicne Umphur District 78656(ภาคต่อ แก้ไข อัพเดท) โค้ดการเลือกจังหวัด อำเภอ ตำบล ด้วย Ajax Code PHP select Provicne Umphur District with Edit 30565แก้ปัญหาPHP อัพขึ้น Host แล้วใช้งานไม่ได้ ไม่ส่งค่าตัวแปรแต่ที่เครื่อง localhost ใช้ได้ 166453PHP Random Number+String สุ่มตัวเลขตัวอักษรหรือตัวหนังสือไม่ซ้ำอย่างง่าย 130226โค้ดระบบแบ่งหน้า เพิ่ม ลบ แก้ไข และค้นหาตามรายชื่อฟิลด์ในหน้าเดียว 82720ติ๊กถูก Checkbox ยอมรับเงื่อนไขแล้วปุ่ม submit ขึ้นให้คลิก 21304แก้ปัญหา warning session_start() function.session-start cannot send session cache limiter 38724การใช้งานโปรแกรม php code father สร้างไฟล์ php แสดงข้อมูล เพิ่ม ลบ แก้ไข ค้นหา แบ่งหน้า 348747ฝึกเขียนโค้ด php โปรแกรมจำลองการถอนเงินจากตู้ ATM 204959สอนเขียน PHP แบบฮาๆ ตอน 1 ติดตั้งโปรแกรมพร้อมใช้งานเบื้องต้น 74603การแบ่งหน้า Boostrap Pagination PHP+MySql ง่าย ๆแบบจับมือทำ 30320Easy Code PHP Check Device โค้ดตรวจสอบประเภทอุปกรณ์ที่กำลังใช้งานเว็บไซต์ 11798สอน PHP สร้าง Webboard ตอน 1 สร้างฐานข้อมูล Mysql 14493สอน PHP Webboard ตอน#2 เชื่อมต่อฐานข้อมูล Connect Mysql DataBase 198907สอน PHP Webboard ตอน#3 ระบบล๊อกอิน Login เข้าสู่ระบบ 31143มาแล้วครับ PHP CODE FATHER V.2016 ร่วมกับ Boostrap 106540วิธีแก้ปัญหา Xampp เข้า phpMyadmin ไม่ได้ 1176สอนเขียนโค้ด PHP แบบจับมือทำ Ep.1 เชื่อมฐานข้อมูลและแสดงผลข้อมูล 26434PHP เทคนิคการ Update ข้อมูลทีละหลาย ๆ รายการ 113642การติดตั้งและใช้งาน Appserv กับ Xampp ในเครื่องเดียวกัน
1# เทคนิคการแสดงและซ่อน div, table และอื่น ๆ ด้วย Javascript Show and Hide DIV or TABLE
เทคนิคการแสดงและซ่อน div, table และอื่น ๆ ด้วย Javascript Show and Hide DIV or TABLE
หลาย ๆ คนคงจะเคยเห็น หรือ พบเจอเว็บใหญ่ ๆ ที่เขาใ้ช้เทคนิคนี้กันบ้างแล้ว
ตัวอย่างที่เห็นบ่อยที่สุดก็คือ ที่เว็บวีดีโอยอดฮิต อย่าง Youtube เมื่อเวลาเราคลิกที่ปุ่ม Share vdo
จะมีส่วนของโค้ดที่จะให้ก๊อปเลื่อนลงไป โดยที่ไม่ต้องรีเฟรชหน้าใหม่
ทำให้สะดวก และ ง่ายกับการใช้งานของผู้ใช้งาน

วันนี้ก็เลยจะพาเพื่อน ๆ ได้ทดลองทำดูกัน
เผื่อจะมีใครเอาไปใช้กับเว็บตัวเอง หรือ เอาไปต่อยอดต่อไปได้
ซึ่งผมคงไม่ได้ทำแบบขั้นเทพอะไร เอาแบบง่าย ๆ ให้พอรู้ และเข้าใจกันก็คงจะเพียงพอ

รูปประกอบ

1.ตอนยังไม่คลิก หรือ เปิดมาทีแรก
2.เมื่อคลิกที่ปุ่มก็จะแสดงส่วนที่ซ่อนไว้ขึ้นมาให้ผู้ใช้เห็น และใช้งาน
3.เมื่อคลิกอีกที จะทำการซ่อนกลับคืนเหมือนเดิม

โค้ด
</html>
<meta http-equiv="content-Type" content="text/html; charset=TIS-620">
<script language="JavaScript"> 
function fncShow(ctrl){ // ฟังก์ชั่นสำหรับ แสดง (Show) ส่งค่า id ของ DIV หรือ Table TD TR
document.getElementById(ctrl).style.display = ''; //สั่งให้แสดง
document.getElementById('embed_button').innerHTML ='<input type="submit" name="Submit" value="Hide Embed" onClick="JavaScript:fncHide(\'embed_div\');">'; // หลังจากสั่งให้แสดงเสร็จ ก็ทำการเปลี่ยนสถานะของปุ่มเป็น "ซ่อน"
}
 
function fncHide(ctrl){ // ฟังก์ชั่นสำหรับ ซ่อน ส่งค่า id ของ DIV หรือ Table TD TR
document.getElementById(ctrl).style.display = 'none'; //สั่งให้แสดง
document.getElementById('embed_button').innerHTML ='<input type="submit" name="Submit" value="Show Embed" onClick="JavaScript:fncShow(\'embed_div\');">';  // หลังจากสั่งให้ซ่อนแล้ว ก็ทำการเปลี่ยนสถานะของปุ่มเป็น "แสดง"
}
</script>

<table width="100%">
  <tbody><tr>
    <td width="7%" id="embed_button"><input type="submit" name="Submit" value="Show Embed" onclick="JavaScript:fncShow('embed_div');"></td>
  </tr>
  <tr id="embed_div" style="display:none; "><!-- จุดที่เราต้องการจะแสดง หรือ ซ่อน ในตัวอย่างนี้คือ TR ของ Table -->
    <td>
Embed this VDO&nbsp;&nbsp;:<input type="text" id="code_embed" value="" code-father.com"="" src="http://www.code-father.com&gt;" width="450" height="180" frameborder="0" allowfullscreen="">
<br>
Link to this page&nbsp;&nbsp;: <input name="textfield" type="text" size="50" value="http://www.code-father.com" onclick="this.focus(); this.select();">
</td><!-- เนื้อหาที่ต้องการแสดงให้กับผู้ใช้งานได้เห็น -->
  </tr>
</tbody></table>
</html>
***********************************
ขออธิบายขยายความเพิ่มเติมกันอีกสักนิด ถึงกระบวนการทำงานของบทความนี้นะครับ
  1. เมื่อเปิดมาทีแรก จะเห็นเพียงแค่ปุ่ม "Show Embed" เพื่อให้คลิก เริ่มแรกจะยังไม่แสดงส่วนเนื้อหาให้ผู้ใช้ได้เห็น
    ตามคำสั่ง   id="embed_div" style="display:none; "> เพราะต้องการให้คลิกก่อนจึงจะแสดงผล
  2. เมื่อคลิกที่ปุ่ม "Show Embed" ระบบจะส่งค่า id ของ TR ไปยังฟังก์ชั่น ด้วยคำสั่ง   onclick="JavaScript:fncShow('embed_div');"
  3. ที่ฟังก์ชั่น  fncShow ก็จะสั่งให้แสดงผล ด้วยคำสั่ง  document.getElementById(ctrl).style.display = ''; และทำการเปลี่ยนปุ่ม "Show Embed" เป็น "Hide Embed" เพื่อให้ผู้ใช้ได้คลิกปิดได้หากไม่ต้องการ
  4. เพียงแค่นี้ผู้ใช้ก็จะสามารถเห็นข้อมูลที่เราซ่อนไว้ได้ และหากต้องการปิด หรือ ซ่อน ก็คลิกที่ปุ่ม "Hide Embed" 
ยิ่งอธิบายก็เหมือนจะทำให้เรื่องง่าย ๆ กลายเป็นเรื่องยาก ยังไงก็ไม่รู้
ลองก๊อปโค้ดไปทดสอบดูกันเลย จะได้เห็นผลกับตาว่ามันทำงานได้จริงหรือเปล่า

*** หากสังเกตุดี ๆ หลายคนอาจจะสงสัยว่า ตรงฟังก์ชั่น ทำไมตัวหนึ่งใช้ส่งค่าเข้าไป แต่อีกตัวหนึ่งไม่เห็นส่งค่าเ้ข้าไปหล่ะ
document.getElementById(ctrl).style.display = ''; //สั่งให้แสดง
document.getElementById('embed_button').innerHTML ='';

 ตรงสีเขียว ๆ นั่นหล่ะครับ คือ ม้นใช้ได้ทั้งสองแบบ ขึ้นอยู่กับลักษณะการใช้งาน หากใช้งานแค่จุดเดียว หรือ ฟอร์มเดียว
เราก็ไม่จำเป็นต้องส่งค่าตัวแปร จะง่ายกว่า โดยระบุค่า ID เข้าไปเลย

แต่ถ้าหากฟังก์ชั่นนี้มีการใช้งานร่วมกันในหลาย ๆ ฟอร์ม หรือ หลาย ๆ หน้า  เราก็จะทำฟังก์ัชั่นไว้ในไฟล์ .js
เพื่อเรียกเข้ามาใ้ช้ร่วมกันได้ในหลาย ๆ หน้า เราก็แค่ส่ง ID เข้าไปในฟังก์ชั่น โค้ดของเราก็จะไม่เยอะ ทำให้ง่ายเวลาแก้ไขฟังก์ชั่น เพราะจะแก้เพียงแค่ที่เดียว คือในไฟล์ .js ของเรานั่นเอง