ปกติเวลาเราสร้างตาราง (table) สำหรับขึ้นมาสักอันหนึ่ง แล้วเราต้องการแยกสีสำหรับแต่ละแถว เราก็อาจจะเขียนโค๊ดในการวนลูปเพื่อให้แต่ละแถวมีสีไม่เหมือนกัน แต่ถ้าหากเราไม่สามารถให้สามารถวนลูปได้ คือ server รัน php หรือ asp ไม่ได้ เราจะมีวิธีแก้ปัญหายังไงดี

ง่ายๆ เลย ก็ใส่สีในแต่ละแถวไปเลยสิ (ง่ายไหม)

<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col" width="33%">ช่องที่</th>
    <th scope="col" width="33%">ตัวหนังสือ</th>
    <th scope="col">ภาษาไทย</th>
  </tr>
  <tr bgcolor="#999">
    <td>1</td>
    <td>A</td>
    <td>ก</td>
  </tr>
  <tr>
    <td>2</td>
    <td>B</td>
    <td>ข</td>
  </tr>
  <tr bgcolor="#999">
    <td>3</td>
    <td>C</td>
    <td>ฃ</td>
  </tr>
  <tr>
    <td>4</td>
    <td>D</td>
    <td>ค</td>
  </tr>
  <tr bgcolor="#999">
    <td>5</td>
    <td>E</td>
    <td>ฅ</td>
  </tr>
  <tr>
    <td>6</td>
    <td>F</td>
    <td>ฆ</td>
  </tr>
  <tr bgcolor="#999">
    <td>7</td>
    <td>G</td>
    <td>ง</td>
  </tr>
  <tr>
    <td>8</td>
    <td>H</td>
    <td>จ</td>
  </tr>
  <tr bgcolor="#999">
    <td>9</td>
    <td>I</td>
    <td>ฉ</td>
  </tr>
</table>

ได้แบบนี้เลย
cmdevhub

หรือถ้าหากเราสามารถใช้ php ได้ เราก็สามารถใช้วิธีการวนลูปก็ได้เหมือนกัน แถมยังสะดวกสบายด้วยสิถ้าหากเขียนโค๊ดก็ได้ประมาณนี้

<?php
	$a = array(array(1,'A','ก'), array(2,'B','ข'), array(3,'C','ฃ'), array(4,'D','ค'), array(5,'E','ฅ'), array(6,'F','ฆ'), array(7,'G','ง'), array(8,'H','จ'), array(9,'I','ฉ'));
?>
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col" width="33%">ช่องที่</th>
    <th scope="col" width="33%">ตัวหนังสือ</th>
    <th scope="col">ภาษาไทย</th>
  </tr>
<?php
	$i = 0;
	foreach($a as $val) {
?>
  <tr <?php echo $i % 2 == 0 ? " bgcolor='#999' " : " bgcolor='#FFF' ";?>>
    <td><?php echo $val[0];?></td>
    <td><?php echo $val[1];?></td>
    <td><?php echo $val[2];?></td>
  </tr>
<?php
		$i++;
	}
?>
</table>

ซึ่งผลลัพธ์ที่ได้ก็จะเหมือนกับตารางข้างบน แต่ถ้าหากเราไม่สามารถเขียนโค๊ดเพื่อใช้งานลูปได้ เราก็ต้องใช้วิธีแรกเอง ซึ่งถ้าหากต้องการเปลี่ยนสีละ จากขาวกับเทาเป็นสีแดงกับน้ำเงิน ทีนี้สิ งานเข้าแล้ว เราก็ต้องมาไล่แก้ทั้งหมดเลย

คำตอบของเราคือ CSS

แล้วใช้ยังไงละ?

เราสามารถเพิ่ม nth-child เพิ่มเข้าไปเป็น attribute ของ css ที่เราต้องการได้ ลองมาดูตัวอย่างเลยล่ะกัน ถ้าต้องการแยกสีให้เหมือนกับตารางข้างบนเราก็สามารถเขียนโค๊ดในส่วนของ CSS ได้ดังนี้

<style type="text/css">
	tr:nth-child(even) { background-color:#0F0; }
	tr:nth-child(odd) { background-color:#F00; }
	tr:first-child {background-color:#FFFFFF;}
</style>

 

<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col" width="33%">ช่องที่</th>
    <th scope="col" width="33%">ตัวหนังสือ</th>
    <th scope="col">ภาษาไทย</th>
  </tr>
  <tr>
    <td>1</td>
    <td>A</td>
    <td>ก</td>
  </tr>
  <tr>
    <td>2</td>
    <td>B</td>
    <td>ข</td>
  </tr>
  <tr>
    <td>3</td>
    <td>C</td>
    <td>ฃ</td>
  </tr>
  <tr>
    <td>4</td>
    <td>D</td>
    <td>ค</td>
  </tr>
  <tr>
    <td>5</td>
    <td>E</td>
    <td>ฅ</td>
  </tr>
  <tr>
    <td>6</td>
    <td>F</td>
    <td>ฆ</td>
  </tr>
  <tr>
    <td>7</td>
    <td>G</td>
    <td>ง</td>
  </tr>
  <tr>
    <td>8</td>
    <td>H</td>
    <td>จ</td>
  </tr>
  <tr>
    <td>9</td>
    <td>I</td>
    <td>ฉ</td>
  </tr>
</table>

cmdevhub

เห็นไหม ได้ผลลัพธ์เหมือนกันเลยแต่ไม่ต้องพึ่งลูปเลยสักนิดเดียว ถ้าหากต้องการแก้สี ก็ทำได้ใน CSS ด้านบนที่เดียวเลยสบายเลยใช่ไหมละ 🙂

ส่วนสาเหตุที่ต้องใส่ first-child เข้าไปด้วย เพราะ tr มันจะนับตั้งแต่แถวแรกเลย

แล้วมันดียังไงเหรอ?

ลองคิดดูว่า ถ้าเราใช้คู่กับ jQuery แล้วถ้าต้องการลบข้อมูลทีละแถวโดยไม่ต้องทำการรีเฟรชหน้าจอ ถ้าหากเรากำหนดสีให้แต่ละแถวไปแล้วเมื่อเราทำการลบแถวนั้นๆ ออกไป สีมันจะเรียงไม่ถูกต้อง ไม่สวยงามแน่นอน ลองดูตัวอย่างข้างล่างละกันครับ

เห็นหรือยังครับว่าง่าย แล้วสะดวกสบายแค่ไหน 😀

ปล. ทดสอบบน IE9, Firefox10, Chrome และ Android Browser เท่านั้นนะครับ ส่วนตัวอื่นๆ ยังไม่ได้ทำการทดสอบ

Comments

จำนวนความเห็น