ต่อไป »

[iammee]

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

[Johnwick888]

ได้ครับ 

[iammee]

ได้ครับ 

แล้วต้องใช้ css ว่าไรครับ แนะนำสอนหน่อยครับ

[Twenty-One]

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

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

[iammee]

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]

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

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

ใส่ชื่อคลาสให้ตรงกัน

[iammee]

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

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

เหมือนเอา เม้าไปชี้ครับ ถึงสี แบคกราวน์จะขึ้น ผมอยากได้แบบ เข้าเรื่อง A ตาราง A พื้นหลังแดง เข้าเรื่อง B ตาราง B พื้นหลังแดง แบบนี้ครับ

[Twenty-One]

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

[iammee]

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

ไม่ครับ ไม่ได้หมายถึงเอาเม้าร์ไปชี้ครับ

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

[Twenty-One]

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

[iammee]

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

แบบนั่นขอแนวทางหน่อยได้ไหมครับ

[Twenty-One]

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

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

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

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

[shaobi]

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

[iammee]

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

นั้นแหละครับ จะเขียนไรเพิ่ม css

[CherryX]

ใส่ได้ค่ะ 

[yaplay]

ถ้า 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]

ถ้า 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]

ผมลองเขียนตามที่เข้าใช่ประมานนี้หรือป่าว
https://testweb2020.000webhostapp.com/

[ppttonline]

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

[iammee]

ผมลองเขียนตามที่เข้าใช่ประมานนี้หรือป่าว
https://testweb2020.000webhostapp.com/

เกือบได้แล้วครับ แต่ลิงค์ที่เราเข้าไปแล้วจะพื้นหลังแดงครับ

[BOS]

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

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