จำนวนการเปิดอ่าน 17
คะแนนเอกสาร

ช่วงนี้กำลังพยายามทำโค้ดต่างๆ ให้มันสะอาดตาอยู่ครับ ซึ่งของบางอย่างเราสามารถใช้ css ในการจัดการเงื่อนไขได้ โดยไม่ทำให้โค้ดเราวุ่นวายสับสน เช่นกรณีแบบนี้

<table>
<tbody>
<tr>
    <td></td>
    <td>1</td>
    <td></td>
</tr>
<tr>
    <td>2</td>
    <td></td>
    <td>1</td>
</tr>
<tr>
    <td>1</td>
    <td>1</td>
    <td></td>
</tr>
</tbody>
</table>

ถ้าเราอยากจะให้ ช่องที่ไม่มีข้อมูลเป็นสีฟ้า เราก็คงต้องใช้ if else กันวุ่น แต่ว่าจริงๆ แล้ว css สามารถมาจัดการเงื่อนไขตรงนี้ให้ได้ครับ ด้วย :empty แบบนี้ครับ

.table-test td:empty {
    background-color: #0c86e6;
}

ก็จะได้ผลแบบนี้

หรือถ้าต้องการให้ช่องสีมีข้อมูล เป็นสีส้ม ก็ใช้ :not คร่อมเข้าไปอีกชั้น แบบนี้

.table-test td:not(:empty) {
    background-color: #ff9933;
}

ก็จะได้แบบนี้

ง่ายใช่มั้ยล่ะครับ โค้ดสะอาดขึ้นเยอะเลย