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

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

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

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

กระทู้: 68



ดูรายละเอียด
« เมื่อ: 18 กันยายน 2019, 08:56:41 »



เหมือนเราเข้าหนังเรื่อง A ลิงค์ A อยากให้ตารางในลิงค์ A มีพื้นหลังสีแดง พอเราเข้าลิงค์ B พอเข้าไปเรื่อง B ก็ให้ในตารางเรื่อง B เป็นสีแดง
บันทึกการเข้า
Johnwick888
Newbie
*

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

กระทู้: 7



ดูรายละเอียด
« ตอบ #1 เมื่อ: 18 กันยายน 2019, 08:58:36 »

ได้ครับ  wanwan013
บันทึกการเข้า
iammee
Newbie
*

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

กระทู้: 68



ดูรายละเอียด
« ตอบ #2 เมื่อ: 18 กันยายน 2019, 09:55:23 »

ได้ครับ  wanwan013
แล้วต้องใช้ css ว่าไรครับ แนะนำสอนหน่อยครับ
บันทึกการเข้า
Twenty-One
Verified Seller
เจ้าพ่อบอร์ดเสียว
*

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

กระทู้: 10,610



ดูรายละเอียด เว็บไซต์
« ตอบ #3 เมื่อ: 18 กันยายน 2019, 11:56:32 »

table.YourClass tr:hover td {
background-color: #FEFEFE;
}

ประมาณนี้นะครับ
บันทึกการเข้า

hosting คุณภาพสูง host เร็ง แรง
vps ราคาไม่แพง
iammee
Newbie
*

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

กระทู้: 68



ดูรายละเอียด
« ตอบ #4 เมื่อ: 18 กันยายน 2019, 12:04:26 »

table.YourClass tr:hover td {
background-color: #FEFEFE;
}

ประมาณนี้นะครับ

แล้วเราต้องใส่โค๊ตอะไรเพิ่มเติมไปไหมครับ

<table id="Sequel">
<thead>
<tr>
<th>ชื่อเรื่อง</th>
<th>ภาค</th>
<th>ปีที่เข้าฉาย</th>
<th>imdb</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="" rel="nofollow">Annabelle</a></td>
<td>1</td>
<td>2 October 2014</td>
<td>5.4</td>
</tr><tr>
<td><a href="" rel="nofollow">Annabelle: Creation</a></td>
<td>2</td>
<td>10 August 2017</td>
<td>6.5</td>
</tr><tr>
<td><a href="" rel="nofollow">Annabelle Comes Home</a></td>
<td>3</td>
<td>26 June 2019</td>
<td>6.0</td>
</tr>
</tbody></table>
บันทึกการเข้า
Twenty-One
Verified Seller
เจ้าพ่อบอร์ดเสียว
*

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

กระทู้: 10,610



ดูรายละเอียด เว็บไซต์
« ตอบ #5 เมื่อ: 18 กันยายน 2019, 13:01:53 »

ก็ทีเขียนไว้คือ css แยกไล์หรือใส่ไว้ด้านบน

<table id="Sequel"> เราก็แก้เป็น <table class="YourClass">

ใส่ชื่อคลาสให้ตรงกัน
บันทึกการเข้า

hosting คุณภาพสูง host เร็ง แรง
vps ราคาไม่แพง
iammee
Newbie
*

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

กระทู้: 68



ดูรายละเอียด
« ตอบ #6 เมื่อ: 18 กันยายน 2019, 13:02:20 »

table.YourClass tr:hover td {
background-color: #FEFEFE;
}

ประมาณนี้นะครับ
เหมือนเอา เม้าไปชี้ครับ ถึงสี แบคกราวน์จะขึ้น ผมอยากได้แบบ เข้าเรื่อง A ตาราง A พื้นหลังแดง เข้าเรื่อง B ตาราง B พื้นหลังแดง แบบนี้ครับ
« แก้ไขครั้งสุดท้าย: 18 กันยายน 2019, 13:03:10 โดย iammee » บันทึกการเข้า
Twenty-One
Verified Seller
เจ้าพ่อบอร์ดเสียว
*

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

กระทู้: 10,610



ดูรายละเอียด เว็บไซต์
« ตอบ #7 เมื่อ: 18 กันยายน 2019, 13:08:06 »

ก็ hover ไงครับ hover ก็เอาเมาส์ไปชี้ ลองดูครับ
บันทึกการเข้า

hosting คุณภาพสูง host เร็ง แรง
vps ราคาไม่แพง
iammee
Newbie
*

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

กระทู้: 68



ดูรายละเอียด
« ตอบ #8 เมื่อ: 18 กันยายน 2019, 13:10:45 »

ก็ hover ไงครับ hover ก็เอาเมาส์ไปชี้ ลองดูครับ
ไม่ครับ ไม่ได้หมายถึงเอาเม้าร์ไปชี้ครับ

คือตามราง มี 3 ตาราง มีหนัง 3 เรื่อง พอเราคลิก หนัง A ไปที่หนัง A ในตาราง A ให้แบคกราวสีแดง พอเราคลิกหนัง B ไปที่หนัง B ก็ให้ตารางหนัง B เป็นแบคกราวแดง ไปหนังเรื่องไหน (ลิงค์ไหน) ก็ให้เป็นหนังเรื่องนั่งตารางแบคกราวสีแดงครับ ไม่ได้หมายถึงเอาเม้าไปชี้ ขอโทษทีครับอาจจะอธิบายผิดไป
บันทึกการเข้า
Twenty-One
Verified Seller
เจ้าพ่อบอร์ดเสียว
*

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

กระทู้: 10,610



ดูรายละเอียด เว็บไซต์
« ตอบ #9 เมื่อ: 18 กันยายน 2019, 14:53:54 »

อ่อแบบนี้ต้องใช้ javascript ช่วยด้วยนะครับ พอคลิกแล้วให้ set ชื่อ class กับ แถวที่ต้องการจะเปลี่ยนสีครับ
บันทึกการเข้า

hosting คุณภาพสูง host เร็ง แรง
vps ราคาไม่แพง
iammee
Newbie
*

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

กระทู้: 68



ดูรายละเอียด
« ตอบ #10 เมื่อ: 18 กันยายน 2019, 15:24:24 »

อ่อแบบนี้ต้องใช้ javascript ช่วยด้วยนะครับ พอคลิกแล้วให้ set ชื่อ class กับ แถวที่ต้องการจะเปลี่ยนสีครับ
แบบนั่นขอแนวทางหน่อยได้ไหมครับ
บันทึกการเข้า
Twenty-One
Verified Seller
เจ้าพ่อบอร์ดเสียว
*

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

กระทู้: 10,610



ดูรายละเอียด เว็บไซต์
« ตอบ #11 เมื่อ: 18 กันยายน 2019, 17:43:03 »

เบื้องต้นลองดูตามกระทู้นี้ครับ ประมณนี้นะครับ

https://stackoverflow.com/ques...5140/jquery-click-change-class

ประยุกต์ต่อเอาครับ

แนะนำให้ใช้ jquery หรือพวก angular จะสะดวกกว่าเขียน javascript สดๆ
บันทึกการเข้า

hosting คุณภาพสูง host เร็ง แรง
vps ราคาไม่แพง
shaobi
คนรักเสียว
*

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

กระทู้: 102



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

ได้ กำหนด class ใน tr <tr class="bg-tr">
แล้วไปเชียน css เพิ่มเติมเอา
บันทึกการเข้า

iammee
Newbie
*

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

กระทู้: 68



ดูรายละเอียด
« ตอบ #13 เมื่อ: 18 กันยายน 2019, 19:42:49 »

ได้ กำหนด class ใน tr <tr class="bg-tr">
แล้วไปเชียน css เพิ่มเติมเอา
นั้นแหละครับ จะเขียนไรเพิ่ม css
บันทึกการเข้า
CherryX
หัวหน้าแก๊งเสียว
*

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

กระทู้: 2,050



ดูรายละเอียด
« ตอบ #14 เมื่อ: 18 กันยายน 2019, 21:27:07 »

ใส่ได้ค่ะ  wanwan003
บันทึกการเข้า

เทรนเว็บเฉพาะทาง
yaplay
ก๊วนเสียว
*

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

กระทู้: 244



ดูรายละเอียด เว็บไซต์
« ตอบ #15 เมื่อ: 18 กันยายน 2019, 21:43:32 »

ถ้า css ผมใช้ประมานนี้ (cssใช้ทุกหน้าที่ลิงค์ไป)
.YourClass {
background-color:#000;
width: 100%;
height: 30px;
}
.YourClass:visited {
background-color:red;
}
ปกติผมไม่ค่อยเขียนเป็นตาราง จะแท็ก div
<div class=""><a href="" class="YourClass"></a></div>
ที่ผมใช้มีแค่นี้ width height และสี อยากได้เท่าไรก้อใส่ได้เลย นอกเหนือจากนี้ ลองหาเพิ่มดูครับ
บันทึกการเข้า

iammee
Newbie
*

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

กระทู้: 68



ดูรายละเอียด
« ตอบ #16 เมื่อ: 18 กันยายน 2019, 22:19:02 »

ถ้า css ผมใช้ประมานนี้ (cssใช้ทุกหน้าที่ลิงค์ไป)
.YourClass {
background-color:#000;
width: 100%;
height: 30px;
}
.YourClass:visited {
background-color:red;
}
ปกติผมไม่ค่อยเขียนเป็นตาราง จะแท็ก div
<div class=""><a href="" class="YourClass"></a></div>
ที่ผมใช้มีแค่นี้ width height และสี อยากได้เท่าไรก้อใส่ได้เลย นอกเหนือจากนี้ ลองหาเพิ่มดูครับ
มีตัวอย่างไหมครับ ลองใช้ก็เหมือนเดิม ลิงค์ที่เราเข้าไปก็สีเดิม
บันทึกการเข้า
yaplay
ก๊วนเสียว
*

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

กระทู้: 244



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

ผมลองเขียนตามที่เข้าใช่ประมานนี้หรือป่าว
https://testweb2020.000webhostapp.com/
« แก้ไขครั้งสุดท้าย: 19 กันยายน 2019, 10:52:42 โดย yaplay » บันทึกการเข้า

ppttonline
สมุนแก๊งเสียว
*

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

กระทู้: 680



ดูรายละเอียด เว็บไซต์
« ตอบ #18 เมื่อ: 19 กันยายน 2019, 09:42:07 »

มาเก็บข้อมูลครับ
บันทึกการเข้า

iammee
Newbie
*

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

กระทู้: 68



ดูรายละเอียด
« ตอบ #19 เมื่อ: 19 กันยายน 2019, 15:12:00 »

ผมลองเขียนตามที่เข้าใช่ประมานนี้หรือป่าว
https://testweb2020.000webhostapp.com/
เกือบได้แล้วครับ แต่ลิงค์ที่เราเข้าไปแล้วจะพื้นหลังแดงครับ

บันทึกการเข้า
BOS
ก๊วนเสียว
*

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

กระทู้: 290



ดูรายละเอียด เว็บไซต์
« ตอบ #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
บันทึกการเข้า

#mechords.com  power by blogger.
หน้า: 1 2 [ทั้งหมด]   ขึ้นบน
พิมพ์