ThaiSEOBoard.com

ความรู้ทั่วไป => General (ถามคุยวิชาการ IM) => ข้อความที่เริ่มโดย: iammee ที่ 18 กันยายน 2019, 08:56:41



หัวข้อ: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: iammee ที่ 18 กันยายน 2019, 08:56:41
(https://1.bp.blogspot.com/-dLf9yG-HaKY/XYGOYHw2TuI/AAAAAAAAJ8Q/xGXRmPikqXUvywBzY-TbHGhCWgmLU4V_wCLcBGAsYHQ/s1600/chrome_F4Zn2Qb7Rj.png)

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


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: Johnwick888 ที่ 18 กันยายน 2019, 08:58:36
ได้ครับ  :wanwan013:


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: iammee ที่ 18 กันยายน 2019, 09:55:23
ได้ครับ  :wanwan013:
แล้วต้องใช้ css ว่าไรครับ แนะนำสอนหน่อยครับ


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: Twenty-One ที่ 18 กันยายน 2019, 11:56:32
table.YourClass tr:hover td {
background-color: #FEFEFE;
}

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


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: iammee ที่ 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>


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: Twenty-One ที่ 18 กันยายน 2019, 13:01:53
ก็ทีเขียนไว้คือ css แยกไล์หรือใส่ไว้ด้านบน

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

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


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: iammee ที่ 18 กันยายน 2019, 13:02:20
table.YourClass tr:hover td {
background-color: #FEFEFE;
}

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


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: Twenty-One ที่ 18 กันยายน 2019, 13:08:06
ก็ hover ไงครับ hover ก็เอาเมาส์ไปชี้ ลองดูครับ


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: iammee ที่ 18 กันยายน 2019, 13:10:45
ก็ hover ไงครับ hover ก็เอาเมาส์ไปชี้ ลองดูครับ
ไม่ครับ ไม่ได้หมายถึงเอาเม้าร์ไปชี้ครับ

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


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: Twenty-One ที่ 18 กันยายน 2019, 14:53:54
อ่อแบบนี้ต้องใช้ javascript ช่วยด้วยนะครับ พอคลิกแล้วให้ set ชื่อ class กับ แถวที่ต้องการจะเปลี่ยนสีครับ


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: iammee ที่ 18 กันยายน 2019, 15:24:24
อ่อแบบนี้ต้องใช้ javascript ช่วยด้วยนะครับ พอคลิกแล้วให้ set ชื่อ class กับ แถวที่ต้องการจะเปลี่ยนสีครับ
แบบนั่นขอแนวทางหน่อยได้ไหมครับ


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: Twenty-One ที่ 18 กันยายน 2019, 17:43:03
เบื้องต้นลองดูตามกระทู้นี้ครับ ประมณนี้นะครับ

https://stackoverflow.com/questions/6065140/jquery-click-change-class

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

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


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: shaobi ที่ 18 กันยายน 2019, 17:50:18
ได้ กำหนด class ใน tr <tr class="bg-tr">
แล้วไปเชียน css เพิ่มเติมเอา


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: iammee ที่ 18 กันยายน 2019, 19:42:49
ได้ กำหนด class ใน tr <tr class="bg-tr">
แล้วไปเชียน css เพิ่มเติมเอา
นั้นแหละครับ จะเขียนไรเพิ่ม css


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: CherryX ที่ 18 กันยายน 2019, 21:27:07
ใส่ได้ค่ะ  :wanwan003:


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: yaplay ที่ 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 และสี อยากได้เท่าไรก้อใส่ได้เลย นอกเหนือจากนี้ ลองหาเพิ่มดูครับ


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: iammee ที่ 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 และสี อยากได้เท่าไรก้อใส่ได้เลย นอกเหนือจากนี้ ลองหาเพิ่มดูครับ
มีตัวอย่างไหมครับ ลองใช้ก็เหมือนเดิม ลิงค์ที่เราเข้าไปก็สีเดิม


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: yaplay ที่ 19 กันยายน 2019, 09:22:20
ผมลองเขียนตามที่เข้าใช่ประมานนี้หรือป่าว
https://testweb2020.000webhostapp.com/


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: ppttonline ที่ 19 กันยายน 2019, 09:42:07
มาเก็บข้อมูลครับ


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: iammee ที่ 19 กันยายน 2019, 15:12:00
ผมลองเขียนตามที่เข้าใช่ประมานนี้หรือป่าว
https://testweb2020.000webhostapp.com/
เกือบได้แล้วครับ แต่ลิงค์ที่เราเข้าไปแล้วจะพื้นหลังแดงครับ

(https://1.bp.blogspot.com/-wjLjiUs0PK8/XYM4Pa4aUFI/AAAAAAAAJ8k/zT_vohqD6PIe-9JKJZP9NmJ4Jgs7-cDgQCLcBGAsYHQ/s1600/chrome_FL4ZQLsacV.png)


หัวข้อ: Re: เราสามารถทำ css background ในตาราง TR ได้ไหมครับ
เริ่มหัวข้อโดย: BOS ที่ 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