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

บทความทั้งหมด วิธีใช้งานโปรแกรม PHP CODE FATHER V.2016 Register - ลงทะเบียนโปรแกรม Contact Us - ติดต่อเรา About Us - เกี่ยบกับเรา รับเขียนเว็บ โปรเจ็ค PHP vs MySQL
ติดต่อเข้ามาได้เลยนะครับ ราคากันเอง ไม่เคยทิ้งงาน
งานแก้ งานด่วน งานเร่งสอบถามกันก่อนได้ครับผม...
98830Code Login Logout Php การทำระบบล๊อกอิน ล๊อกเอ้า และป้องกันการลักไก่ แบบละเอียดที่สุด 38126Code Send Email by PHP การส่งอีเมล์ด้วย พีเอสพี 41240Captcha Security Code PHP ใส่รหัสยืนยันก่อนโพสป้องกันการสแปมเว็บเราดีกว่า 68240Php Code Insert to Mysql การเพิ่มข้อมูลใหม่เข้าสู่ฐานข้อมูล 46204PHP CODE FATHER โปรแกรมสร้างโปรเจ็ค PHP + Mysql สร้างโค้ดโปรแกรม php mysql insert update add edit delete ง่ายๆ 33476Download Free Program Php Code Father V.2010 ดาวน์โหลดโปรแกรมฟรี 31495ดาวน์โหลดคู่มือ วิธีใช้งานโปรแกรม Php Code Father V.2010 56834Function Confirm Delete JavaScript การยืนยันก่อนลบข้อมูล ง่าย ๆ แต่สำคัญ 30974PHP Function ECHO Exit ฟังก์ชั่นเล็ก ๆ ที่ไม่ธรรมดา เครื่องมือ DEBUG ชั้นยอด 9486PHP CODE FATHER V.2010 ตัวเต็ม Full ขั้นตอนการสมัครและรายละเอียดการลงทะเบียนใช้งานโปรแกรม 77524Code Search PHP In Mysql Database By Fields การค้นหาข้อมูลในฐานข้อมูล ตามชื่อฟิลด์ 28024แก้ปัญหาการใช้งานฟังก์ชั่น substr ใน php ตัดข้อความภาษาไทยแล้วกลายเป็นภาษาต่างดาว 36553การดาวน์โหลดไฟล์+เทคนิคการตั้งชื่อไฟล์เป็นภาษาไทย PHP Code Download File Thai 44481PHP Function Date Thai การแปลงวันที่จาก ค.ศ. เป็น พ.ศ. วันที่แบบไทย ๆ สำหรับคนไทย 40255การแทรก PHP ใน Javascript เรื่องกล้วย ๆ ที่อาจจะต้องได้ใช้ 37682การแทรก Javascript ใน PHP เรื่องกล้วย ๆ ที่จำเป็นต้องรู้ 52198Php Code Upload File การอัพโหลดไฟล์และการตรวจสอบประเภทของไฟล์ภาพและอื่น ๆ 15166 Single Quote SQL Query Insert update แก้ปัญหาเวลาข้อมูลที่มีเครื่องหมายฟันเดี่ยว (single quote) แล้วไม่ได้ ไม่ผ่าน 14065การใช้งานฟังก์ชั่น substring() ใน javascript และการตรวจสอบจำนวนเงินกับการสั่งซื้ออัลบั้มออนไลน์ 110242คำสั่ง sql Select from Where ,Like ,Order By ที่จำเป็นต้องใช้และต้องใช้บ่อย ๆ 48717code update php to mysql database คำสั่งปรับปรุงข้อมูลในฐานข้อมูล 45430php function number_format ใส่จุดทศนิยมและเครื่องหมายคอมม่าให้ตัวเลข เงิน 38023ง่าย ๆ php auto id การสร้างเลขที่อัตโนมัติก่อนเพิ่มข้อมูลใหม่ 52566Code Redirect URL ด้วย php และ javascript การส่งผู้ใช้ไปหน้าที่เราต้องการ 51655ง่าย ๆ การทำวันที่แบบ List ให้เลือก วัน เดืือน ปี Select Option List Date 93002Code PHP Popup การป๊อปอัพหน้าต่างใหม่โดยใช้ Javascript 47187เทคนิค...การทำให้ Textbox กรอกหรือป้อนได้เฉพาะตัวเลขด้วย Javascript ง่ายๆ 44652Step 1 สร้างเว็บบอร์ดแบบบ้านๆ ด้วย PHP Webboard Script 34552เทคนิคการแสดงและซ่อน div, table และอื่น ๆ ด้วย Javascript Show and Hide DIV or TABLE 51388Step 2 ฐานข้อมูล สร้างเว็บบอร์ดแบบบ้านๆ ด้วย PHP Webboard Script 90633ปัญหาการแสดงผลตารางบน Internet Explorer เพี้ยน Table ie7 Error 20939การเชื่อมต่อฐานข้อมูล PHP+MySQL และวิธีแก้ไขปัญหาภาษาไทยผิดเพี้ยน กลายเป็นภาษาต่างดาว 34022วิธีแก้ปัญหา Internal Server Error ตอนรัน PHP กับ Apache Server MSQL 34345แปลงตัวเลขให้เป็นตัวอักษรภาษาไทย PHP Code Thai BathText 37044php easy calculator เครื่องคิดเลขอย่างง่าย บวก ลบ คูณ หาร 31760php easy calculator with Ajax เครื่องคิดเลขอย่างง่าย บวก ลบ คูณ หาร ภาคต่อ 181301ทำระบบล๊อกอินอย่างง่าย ด้วย PHP Login with Mysql Data Base 10866Step 3 โค้ดเว็บบอร์ดแบบง่าย ๆ พร้อมใช้งาน PHP Webboard Script 41357โค้ดการเลือกจังหวัด อำเภอ ตำบล ด้วย Ajax vs Code PHP select Provicne Umphur District 76250(ภาคต่อ แก้ไข อัพเดท) โค้ดการเลือกจังหวัด อำเภอ ตำบล ด้วย Ajax Code PHP select Provicne Umphur District with Edit 24265แก้ปัญหาPHP อัพขึ้น Host แล้วใช้งานไม่ได้ ไม่ส่งค่าตัวแปรแต่ที่เครื่อง localhost ใช้ได้ 162482PHP Random Number+String สุ่มตัวเลขตัวอักษรหรือตัวหนังสือไม่ซ้ำอย่างง่าย 126227โค้ดระบบแบ่งหน้า เพิ่ม ลบ แก้ไข และค้นหาตามรายชื่อฟิลด์ในหน้าเดียว 79095ติ๊กถูก Checkbox ยอมรับเงื่อนไขแล้วปุ่ม submit ขึ้นให้คลิก 18945แก้ปัญหา warning session_start() function.session-start cannot send session cache limiter 36322การใช้งานโปรแกรม php code father สร้างไฟล์ php แสดงข้อมูล เพิ่ม ลบ แก้ไข ค้นหา แบ่งหน้า 344443ฝึกเขียนโค้ด php โปรแกรมจำลองการถอนเงินจากตู้ ATM 202701สอนเขียน PHP แบบฮาๆ ตอน 1 ติดตั้งโปรแกรมพร้อมใช้งานเบื้องต้น 71235การแบ่งหน้า Boostrap Pagination PHP+MySql ง่าย ๆแบบจับมือทำ 27990Easy Code PHP Check Device โค้ดตรวจสอบประเภทอุปกรณ์ที่กำลังใช้งานเว็บไซต์ 9276สอน PHP สร้าง Webboard ตอน 1 สร้างฐานข้อมูล Mysql 14491สอน PHP Webboard ตอน#2 เชื่อมต่อฐานข้อมูล Connect Mysql DataBase 198907สอน PHP Webboard ตอน#3 ระบบล๊อกอิน Login เข้าสู่ระบบ 28769มาแล้วครับ PHP CODE FATHER V.2016 ร่วมกับ Boostrap 51695วิธีแก้ปัญหา Xampp เข้า phpMyadmin ไม่ได้
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 ของเรานั่นเอง