Bootstrap CSS ตารางสวย ๆ พร้อมวิธีเปลี่ยนสีตารางด้วย jQuery

การเพิ่มความสวยงามให้กับ HTML Table ด้วย Bootstrap css ตัวอย่างการทำ Style ตารางด้วย Bootstrap พร้อมตัวอย่าง Javascript เปลียนสีตารางแบบ Real-time ด้วย jQuery ว่าแล้วดูเพลินเลยได้นำเทคนิคสำหรับเพิ่มความสวยงามให้กับตารางมาฝากเพื่อน ๆ กัน จะง่ายแค่ไหนไปดู

ตัวอย่าง Bootstrap CSS สร้างตารางสวย ๆ

เราจะมาทำตัวอย่างตาราง Bootstrap กันแบบง่าย ๆ ด้วยการใช้สีให้กับ Table header และ Column แรกของ Row ด้วย Stylesheet นี้

ใส่สีให้ตัว Table Header
table.green-white thead tr {
        background-color: #A6CE38; color:#FFF;
}
ใส่สีให้กับ Column แรกของแต่ละ tr
table.green-white tr td:first-child {
        background-color: #A6CE38;
        color:#FFF;
        font-weight: bold;
}

* คุณสามารถเปลี่ยนสีตารางตารางเป็นสีอื่น ๆ ได้ด้วยการแก้ style

  • background-color:
  • color:

CSS สำหรับทำตารางสลับสี

tbody tr:nth-child(odd) {background-color: #FFF;} << กำหนดสีตารางเลขคี่เป็นสีขาว
tbody tr:nth-child(even) {background-color: #EAEAEA;} << กำหนดสีตารางเลขคู่เป็นสีเทา

ตัวอย่าง Javacript วิธีเปลี่ยนสีตารางด้วย jQuery

เทคนิคเล็ก ๆ น้อย สำหรับวิธีเขียนโค้ดที่สามารถทำให้คุณเปลี่ยนสีตาราง HTML table ด้วยการเปลี่ยนตัวเลือกบน Dropdown แบบ Real-time จะทำอย่างไร ไปดูกัน

1. กำหนด Element ID และกำหนด Default class ให้กับ Table กันก่อน

<table id="demoTable" class="green-white">

2. สร้าง Dropdown ขึ้นมา กำหนด Element ID ให้กับ Dropdown กำหนด option value ให้เหมือนกับชื่อ css class

<select id="selectTableTheme" class="form-control">
      <option value="green-white">Green white color</option>
      <option value="blue-white">Blue white color</option>
      <option value="yellow-black">Yellow black color</option>
</select>

3. สร้าง Javascript ให้เปลียน Table Class เมื่อมีการเปลี่ยนค่าใน Dropdown

jQuery(document).ready(function(){
        jQuery('select#selectTableTheme').on('change',function(){
                jQuery('table#demoTable').attr('class',jQuery(this).val())
        });
})

หรือถ้าไม่อยากเขียนเอง พี่ ๆ ก็สามารถ Copy HTML, JS, และ CSS ตามตัวอย่างโค้ดด้านบนไปใช้งานกันได้เลยน้า 😁😁😁

เป็นยังไงกันบ้างคะ ไม่ยากเลยใช่ไหมละสำหรับ Bootstrap CSS ตารางสวย ๆ พร้อมวิธีเปลี่ยนสีตารางด้วย jQuery ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย

เทคนิคอื่นๆ เกี่ยวกับการเขียนโค้ด คลิก

อย่าลืมไปติดตาม Facebook fanpage ของเรา >> Click <<

หมวดหมู่เกี่ยวกับ Coding

เนื้อหาที่คล้ายกัน...

Javascript เปิด/ปิด ซ่อน/แสดง Element โดยใช้ jQuery แบบต่างๆ

Javascript เปิด/ปิด ซ่อน/แสดง Element โดยใช้ jQuery แบบต่างๆ

ดูเพลิน Admin - 11 ม.ค. 66
แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

ดูเพลิน Admin - 23 ธ.ค. 65
Code script เช็คเลขบัตรประชาชน แบบ Real-time

Code script เช็คเลขบัตรประชาชน แบบ Real-time

ดูเพลิน Admin - 21 ธ.ค. 65
วิธีทำ Textbox Autocomplete จากฐานข้อมูล ด้วย jQuery Ajax

วิธีทำ Textbox Autocomplete จากฐานข้อมูล ด้วย jQuery Ajax

ดูเพลิน Admin - 16 ม.ค. 66
ทำ Search Table การ Filter ซ่อน/แสดง row เมื่อกรอก Textbox

ทำ Search Table การ Filter ซ่อน/แสดง row เมื่อกรอก Textbox

ดูเพลิน Admin - 23 ม.ค. 66
Code script ตรวจสอบรูปแบบ Email pattern แบบ Real-time

Code script ตรวจสอบรูปแบบ Email pattern แบบ Real-time

ดูเพลิน Admin - 28 ธ.ค. 65
Javascript เทคนิค Check & Get ค่า Hash จาก URL

Javascript เทคนิค Check & Get ค่า Hash จาก URL

ดูเพลิน Admin - 26 ม.ค. 66
Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

ดูเพลิน Admin - 21 ธ.ค. 65

เรื่องราวเอื่น ๆ ในหมวดเทคนิคการเขียนโค้ด...

let value = 147/32; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.59 Result = 5let value = 147/33; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.454 Result = 4