Post archive
Tag: table
-
ลบแถวออกจากตารางด้วย jQuery
ขอเล่นกับตารางและ jQuery อีกสักบทความ เหมือนเดิมครับ เน้นที่ง่ายๆ เอาไปประยุกต์ต่อ บทความในตอนนี้สิ่งที่จะทำคือ เมื่อท่านคลิกแถวไหนของตาราง แถวนั้นก็จะถูกลบออกไปจากตารางทันที มาดูกันครับว่า ทำอย่างไร Live Demo โครงสร้าง HTML : <table id="table"> <tr> <th>ลำดับ</th> <th>สาขา</th> </tr> <tr> <td>1</td> <td>สุรวงศ์</td> </tr> <tr> <td>2</td> <td>เพชรบุรีตัดใหม่</td> </tr> </table><table id="table"> <tr> <th>ลำดับ</th> <th>สาขา</th> </tr> <tr> <td>1</td> <td>สุรวงศ์</td> </tr> <tr> <td>2</td> <td>เพชรบุรีตัดใหม่</td> </tr> </table> include jQuery เข้ามา : <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> เขียนโค้ด : $(document).ready(function(){ […]
READ MORE -
เพิ่มแถวเข้าไปในตารางด้วย jQuery
มันเป็นอะไรที่ง่ายมากๆครับผม ถ้าเกิดว่าเราเขียนด้วย javascript ธรรมดา คงต้องใช้โค้ดหลายบรรทัดทีเดียว แต่ถ้าใช้ jQuery นะแค่ 2-3 บรรทัดเอง จ้า มาดูกันว่าทำยังไง ภาพสำเร็จหน้าตาอย่างนี้ Live Demo โครงสร้าง HTML : เตรียมปุ่มไว้ด้วย พอคลิกปุ่ม ให้เพิ่มแถวเข้าไป <input type="button" name="button" id="button" value="เพิ่มแถว" /> <table id="table"> <tr> <th>ลำดับ</th> <th>สาขา</th> </tr> <tr> <td>1</td> <td>สุรวงศ์</td> </tr> <tr> <td>2</td> <td>เพชรบุรีตัดใหม่</td> </tr> </table><input type="button" name="button" id="button" value="เพิ่มแถว" /> <table id="table"> <tr> <th>ลำดับ</th> <th>สาขา</th> </tr> <tr> <td>1</td> […]
READ MORE -
ไฮไลท์แถวในตารางด้วย jQuery
การทำไฮไลท์แถวในตาราง ก็เพื่อให้ยูสเซ่อร์มองได้สะดวก เมื่อข้อมูลมันเยอะๆ ผลลัพธ์จะเป็นดังภาพครับ Live Demo มาดูกันครับว่าทำอย่างไร โครงสร้าง HTML : <table id="table"> <tr> <th>ลำดับ</th> <th>สาขา</th> </tr> <tr class=’even’ > <td>1</td> <td>สุรวงศ์</td> </tr> <tr class=’odd’ > <td>2</td> <td>เพชรบุรีตัดใหม่</td> </tr> <tr class=’even’ > <td>3</td> <td>รามอินทราทีมA</td> </tr> </table><table id="table"> <tr> <th>ลำดับ</th> <th>สาขา</th> </tr> <tr class=’even’ > <td>1</td> <td>สุรวงศ์</td> </tr> <tr class=’odd’ > <td>2</td> <td>เพชรบุรีตัดใหม่</td> </tr> <tr class=’even’ > […]
READ MORE -
left join 3 table
การ join กันมากกว่า 2 ตารางนั้น ไม่ได้มีอะไรยุ่งยากอย่างที่คิด วิธีการก็แค่ เขียน join ต่อกันไปเรื่อยๆ ยกตัวอย่างนะครับ ถ้าสมมติว่า ผมมี ตารางในฐานข้อมูล อยู่ 3 ตาราง คือ province , amphur , tumbol เก็บ จังหวัด อำเภอ ตำบล ตามลำดับ และทีนี้ ผมต้องการ เอารายชื่อตำบลมาแสดง โดยให้แสดงจังหวัด และอำเภอ ด้วย ซึ่งจังหวัดและอำเภอนั้น ก็เก็บแยกกันไว้ ตามตารางด้านบน งานนี้เลยต้อง join กัน 3 ตาราง
READ MORE -
