ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comความรู้ทั่วไปGeneral (ถามคุยวิชาการ IM)เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
หน้า: 1 [2]  ทั้งหมด   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ  (อ่าน 3071 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
BOS
ก๊วนเสียว
*

พลังน้ำใจ: 33
ออฟไลน์ ออฟไลน์

กระทู้: 459



ดูรายละเอียด เว็บไซต์
« ตอบ #20 เมื่อ: 19 กันยายน 2019, 17:23:55 »

ลองแบบนี้ดูครับ

CSS
โค๊ด:
body {
  background: #141414;
}
#Sequel {
  width: 100%;
  border-collapse: collapse;
  background: #141414;
  color: #fff;
  text-align: left;
  }
#Sequel a {
  text-decoration: none;
  color: #fff;
}
#Sequel tr {
  border: 2px solid #848484;
}
#Sequel th,
#Sequel td {
  height: 50px;
  padding: 0 12px;
}
#Sequel tr.current {
  background: #f00;
}

HTML
โค๊ด:
<table id="Sequel">
  <thead>
    <tr>
      <th>ชื่อเรื่อง</th>
      <th>ภาค</th>
      <th>ปีที่เข้าฉาย</th>
      <th>imdb</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="?a" rel="nofollow">Annabelle</a></td>
      <td>1</td>
      <td>2 October 2014</td>
      <td>5.4</td>
    </tr>
    <tr>
      <td><a href="?b" rel="nofollow">Annabelle: Creation</a></td>
      <td>2</td>
      <td>10 August 2017</td>
      <td>6.5</td>
    </tr>
    <tr>
      <td><a href="?c" rel="nofollow">Annabelle Comes Home</a></td>
      <td>3</td>
      <td>26 June 2019</td>
      <td>6.0</td>
    </tr>
  </tbody>
</table>

JS
โค๊ด:
window.addEventListener('DOMContentLoaded', function(){
  var cur = window.location.href;
  var alinks = document.querySelectorAll("#Sequel a");
  for ( var i=0; i<alinks.length; i++ ) {
    var a = alinks[i];
    if ( a == cur ) {
      a.closest("tr").classList.add("current");
    }
  }
});

https://codepen.io/60ss/project/full/ZKaGVn
บันทึกการเข้า

หน้า: 1 [2]  ทั้งหมด   ขึ้นบน
พิมพ์