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

บทความทั้งหมด วิธีใช้งานโปรแกรม PHP CODE FATHER V.2016 Register - ลงทะเบียนโปรแกรม Contact Us - ติดต่อเรา About Us - เกี่ยบกับเรา รับเขียนเว็บ โปรเจ็ค PHP vs MySQL
ติดต่อเข้ามาได้เลยนะครับ ราคากันเอง ไม่เคยทิ้งงาน
งานแก้ งานด่วน งานเร่งสอบถามกันก่อนได้ครับผม...
106605Code Login Logout Php การทำระบบล๊อกอิน ล๊อกเอ้า และป้องกันการลักไก่ แบบละเอียดที่สุด 40327Code Send Email by PHP การส่งอีเมล์ด้วย พีเอสพี 42855Captcha Security Code PHP ใส่รหัสยืนยันก่อนโพสป้องกันการสแปมเว็บเราดีกว่า 72299Php Code Insert to Mysql การเพิ่มข้อมูลใหม่เข้าสู่ฐานข้อมูล 48483PHP CODE FATHER โปรแกรมสร้างโปรเจ็ค PHP + Mysql สร้างโค้ดโปรแกรม php mysql insert update add edit delete ง่ายๆ 34954Download Free Program Php Code Father V.2010 ดาวน์โหลดโปรแกรมฟรี 32847ดาวน์โหลดคู่มือ วิธีใช้งานโปรแกรม Php Code Father V.2010 60825Function Confirm Delete JavaScript การยืนยันก่อนลบข้อมูล ง่าย ๆ แต่สำคัญ 32715PHP Function ECHO Exit ฟังก์ชั่นเล็ก ๆ ที่ไม่ธรรมดา เครื่องมือ DEBUG ชั้นยอด 11052PHP CODE FATHER V.2010 ตัวเต็ม Full ขั้นตอนการสมัครและรายละเอียดการลงทะเบียนใช้งานโปรแกรม 84127Code Search PHP In Mysql Database By Fields การค้นหาข้อมูลในฐานข้อมูล ตามชื่อฟิลด์ 29515แก้ปัญหาการใช้งานฟังก์ชั่น substr ใน php ตัดข้อความภาษาไทยแล้วกลายเป็นภาษาต่างดาว 38424การดาวน์โหลดไฟล์+เทคนิคการตั้งชื่อไฟล์เป็นภาษาไทย PHP Code Download File Thai 47577PHP Function Date Thai การแปลงวันที่จาก ค.ศ. เป็น พ.ศ. วันที่แบบไทย ๆ สำหรับคนไทย 43059การแทรก PHP ใน Javascript เรื่องกล้วย ๆ ที่อาจจะต้องได้ใช้ 39881การแทรก Javascript ใน PHP เรื่องกล้วย ๆ ที่จำเป็นต้องรู้ 55194Php Code Upload File การอัพโหลดไฟล์และการตรวจสอบประเภทของไฟล์ภาพและอื่น ๆ 15641 Single Quote SQL Query Insert update แก้ปัญหาเวลาข้อมูลที่มีเครื่องหมายฟันเดี่ยว (single quote) แล้วไม่ได้ ไม่ผ่าน 14302การใช้งานฟังก์ชั่น substring() ใน javascript และการตรวจสอบจำนวนเงินกับการสั่งซื้ออัลบั้มออนไลน์ 124044คำสั่ง sql Select from Where ,Like ,Order By ที่จำเป็นต้องใช้และต้องใช้บ่อย ๆ 51399code update php to mysql database คำสั่งปรับปรุงข้อมูลในฐานข้อมูล 48568php function number_format ใส่จุดทศนิยมและเครื่องหมายคอมม่าให้ตัวเลข เงิน 42806ง่าย ๆ php auto id การสร้างเลขที่อัตโนมัติก่อนเพิ่มข้อมูลใหม่ 55858Code Redirect URL ด้วย php และ javascript การส่งผู้ใช้ไปหน้าที่เราต้องการ 54496ง่าย ๆ การทำวันที่แบบ List ให้เลือก วัน เดืือน ปี Select Option List Date 98419Code PHP Popup การป๊อปอัพหน้าต่างใหม่โดยใช้ Javascript 54147เทคนิค...การทำให้ Textbox กรอกหรือป้อนได้เฉพาะตัวเลขด้วย Javascript ง่ายๆ 46245Step 1 สร้างเว็บบอร์ดแบบบ้านๆ ด้วย PHP Webboard Script 38152เทคนิคการแสดงและซ่อน div, table และอื่น ๆ ด้วย Javascript Show and Hide DIV or TABLE 52943Step 2 ฐานข้อมูล สร้างเว็บบอร์ดแบบบ้านๆ ด้วย PHP Webboard Script 91962ปัญหาการแสดงผลตารางบน Internet Explorer เพี้ยน Table ie7 Error 23251การเชื่อมต่อฐานข้อมูล PHP+MySQL และวิธีแก้ไขปัญหาภาษาไทยผิดเพี้ยน กลายเป็นภาษาต่างดาว 37417วิธีแก้ปัญหา Internal Server Error ตอนรัน PHP กับ Apache Server MSQL 36249แปลงตัวเลขให้เป็นตัวอักษรภาษาไทย PHP Code Thai BathText 39267php easy calculator เครื่องคิดเลขอย่างง่าย บวก ลบ คูณ หาร 33133php easy calculator with Ajax เครื่องคิดเลขอย่างง่าย บวก ลบ คูณ หาร ภาคต่อ 186716ทำระบบล๊อกอินอย่างง่าย ด้วย PHP Login with Mysql Data Base 13761Step 3 โค้ดเว็บบอร์ดแบบง่าย ๆ พร้อมใช้งาน PHP Webboard Script 43969โค้ดการเลือกจังหวัด อำเภอ ตำบล ด้วย Ajax vs Code PHP select Provicne Umphur District 77761(ภาคต่อ แก้ไข อัพเดท) โค้ดการเลือกจังหวัด อำเภอ ตำบล ด้วย Ajax Code PHP select Provicne Umphur District with Edit 28455แก้ปัญหาPHP อัพขึ้น Host แล้วใช้งานไม่ได้ ไม่ส่งค่าตัวแปรแต่ที่เครื่อง localhost ใช้ได้ 164872PHP Random Number+String สุ่มตัวเลขตัวอักษรหรือตัวหนังสือไม่ซ้ำอย่างง่าย 128775โค้ดระบบแบ่งหน้า เพิ่ม ลบ แก้ไข และค้นหาตามรายชื่อฟิลด์ในหน้าเดียว 81320ติ๊กถูก Checkbox ยอมรับเงื่อนไขแล้วปุ่ม submit ขึ้นให้คลิก 20316แก้ปัญหา warning session_start() function.session-start cannot send session cache limiter 37765การใช้งานโปรแกรม php code father สร้างไฟล์ php แสดงข้อมูล เพิ่ม ลบ แก้ไข ค้นหา แบ่งหน้า 347163ฝึกเขียนโค้ด php โปรแกรมจำลองการถอนเงินจากตู้ ATM 204012สอนเขียน PHP แบบฮาๆ ตอน 1 ติดตั้งโปรแกรมพร้อมใช้งานเบื้องต้น 73265การแบ่งหน้า Boostrap Pagination PHP+MySql ง่าย ๆแบบจับมือทำ 29315Easy Code PHP Check Device โค้ดตรวจสอบประเภทอุปกรณ์ที่กำลังใช้งานเว็บไซต์ 10767สอน PHP สร้าง Webboard ตอน 1 สร้างฐานข้อมูล Mysql 14491สอน PHP Webboard ตอน#2 เชื่อมต่อฐานข้อมูล Connect Mysql DataBase 198907สอน PHP Webboard ตอน#3 ระบบล๊อกอิน Login เข้าสู่ระบบ 30139มาแล้วครับ PHP CODE FATHER V.2016 ร่วมกับ Boostrap 105462วิธีแก้ปัญหา Xampp เข้า phpMyadmin ไม่ได้ 245สอนเขียนโค้ด PHP แบบจับมือทำ Ep.1 เชื่อมฐานข้อมูลและแสดงผลข้อมูล 25417PHP เทคนิคการ Update ข้อมูลทีละหลาย ๆ รายการ 9783การติดตั้งและใช้งาน 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 ของเรานั่นเอง