หน้าแรก > เทคนิคการเขียนโค้ด > Bootstrap CSS ตารางสวย ๆ พร้อมวิธีเปลี่ยนสีตารางด้วย jQuery

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

Spread the love
จำนวนผู้เข้าชม : 165

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

See the Pen Javascript change table color Bootstrap table css by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

ตัวอย่าง 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 <<

บทความที่น่าสนใจ...