如何懸停包含特定資料的<td>？ -有解無憂

我需要在我懸停的<td>中顯示紅色背景顏色。例如，如果我懸停了'Apple'，那么所有<td>中的'Apple'也應被懸停為同樣的顏色。目前只能懸停一個<td>Apple</td>.

。

span class="hljs-selector-tag">table {
margin: 2rem;
}

th, td {
border: 1px solid #333;
}

td：hover{
background-color:red
}

html{
font-size: 24px;
}

< h3>表1</h3>

<table>/span>
<tr> 
<th>標題1.1</th>/span>
<th>標題1.2</th>/span>
<th>標題1.3</th>/span>
</tr>/span>
<tr>/span>
<td>蘋果</td>/span>
<td>Orange</td>
<td>檸檬</td>/span>
</tr>/span>
<tr>/span>
<td>Orange</td>
<td>檸檬</td>/span>
<td>蘋果</td>/span>
</tr>/span>
</table>/span>

Codepen

uj5u.com熱心網友回復：

你可以在jQuery的幫助下做到這一點。試著運行下面的片段。

。

$('.apple').hover(
  function(){
        $('.apple').css({"background":"red"}) 。
  },function() {
        $('.apple').css({"background":"white"}) 。
  })
  
$('.orange').hover(
  function(){
        $('.orange').css({"background":"orange"}) 。
  }
  ,function() {
        $('.orange').css({"background":"white"}) 。
  }
)

$('.lemon'/span>).hover(
  function() {
        $('.lemon').css({"background":"yellow"}) 。
  }, function() {
        $('.lemon').css({"background":"white"}) 。
})

html {
  字體大小。24px;
}

table {
  margin: 2rem;
}

th, td {
  border: 1px solid #333;
}

td span {
  display: block;
}

td:hover span.apple {
  background-color:red
}

<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<h3>Table 1</h3>

<table>/span>
  <tr> 
    <th>標題1.1</th>/span>
    <th>標題1.2</th>/span>
    <th>標題1.3</th>/span>
  </tr>/span>
  <tr>/span>
    <td>span class="apple"> 蘋果</span></td>
    <td>span class="orange"> 橙色</span></td>/span>
    <td>span class="lemon"> 檸檬</span></td>/span>
  </tr>/span>
  <tr>/span>
    <td>span class="orange" > 橙色</span></td>/span>
    <td>span class="lemon"> 檸檬</span></td>/span>
    <td>span class="apple"> 蘋果</span></td>
  </tr>/span>
</table>/span>

uj5u.com熱心網友回復：

這不能只用HTML和CSS來完成，因為CSS不知道內容的情況。

使用Javascript，你可以設定CSS變數，而這些變數又會設定單元格的背景。

這段代碼會瀏覽每個td元素，并設定style background: var(--name of fruit)，因此，例如所有蘋果單元格都添加了style="background: var(--apple);" 。然后，當一個td被懸停時，JS將--蘋果設定為紅色，當滑鼠移出時，將其設定為透明。

這樣一來，所有帶有background: var(--apple)的tds都會被突出顯示。

沒有必要在每次懸停發生時遍歷表格中的所有單元格，你可以通過在開始時一次性設定所有內容來做到這一點。

。

function setHighlight(e) {
  table.style.setProperty('--' e. target.textContent, 'red'）。)
}

function removeHighlight（e） {
  table.style.setProperty('--' e. target.textContent, 'transparent'）。)
}
const table = document.querySelector（'table'）。
const tds = document.querySelectorAll（'td'）。
tds.forEach(td => {
  td.addEventListener('mouseover', setHighlight)。
  td.style.backgroundColor = 'var(--'   td.textContent   ' ）'。
});
tds.forEach(td => {
  td.addEventListener('mouseout', removeHighlight) 。
});

< h3>表1</h3>

<table>/span>
  <tr> 
    <th>標題1.1</th>/span>
    <th>標題1.2</th>/span>
    <th>標題1.3</th>/span>
  </tr>/span>
  <tr>/span>
    <td>蘋果</td>/span>
    <td>Orange</td>
    <td>檸檬</td>/span>
  </tr>/span>
  <tr>/span>
    <td>Orange</td>
    <td>檸檬</td>/span>
    <td>蘋果</td>/span>
  </tr>/span>
</table>/span>

uj5u.com熱心網友回復：

在每個td中添加一個類并使用JQuery。見下面的例子。

。

$(document)。 ready(function() {
  $("td.apple"/span>).hover(function(){
    $(".apple").css("背景顏色", "紅色")
    }, function(){
    $(".apple").css("背景顏色", "白色")。
  });
});

<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<table> 
  <tr> 
    <th>Company</th>
    <th>聯系</th>/span>
    <th>Country</th>
  </tr>/span>
  <tr>/span>
    <td> Alfreds Futterkiste</td>
    <td class="apple"/span>> 蘋果</td>
    <td class="apple"/span>> 蘋果</td>
  </tr>/span>
  <tr>/span>
    <td>Centro comercial Moctezuma</td>
    <td class="apple"/span>> 蘋果</td>
    <td>/span>墨西哥</td>
  </tr>/span>
  <tr>/span>
    <td>Ernst Handel</td>
    <td>羅蘭德-孟德爾</td>
    <td class="apple"/span>> 蘋果</td>
  </tr>/span>
  <tr>/span>
    <td>Island Trading</td>
    <td>/span>Helen Bennett</td>/span>
    <td>英國</td>/span>
  </tr>/span>
  <tr>/span>
    <td>Laughing Bacchus Winecellars </td>
    <td>/span>Yoshi Tannamuri</td>
    <td>加拿大</td>/span>
  </tr>/span>
  <tr>/span>
    <td>/span>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>意大利</td>/span>
  </tr>/span>
</table>/span>

uj5u.com熱心網友回復：

如果你不想在你的代碼中添加額外的ID和添加jquery作為依賴項，你可以使用vanilla JS

。

// Get all TDs
const tds = Array.from（document. querySelectorAll("td"))。

tds.map(td => {
  
  ///將滑鼠移到TD上以繪制BG。
  td.addEventListener("mouseenter", (event) =>  {
    const text = event.target.textContent;
    
    //用相同的文本繪制TD。
    tds.map(td =>  {
      if(td.textContent == text) {
        td.style.background = 'red'/span>;
      }
    });

  });
  
  //bind mouseleave to TDs to remove BG.
  td.addEventListener("mouseleave", (event) => /span> {
   
    tds.map(td => {
      td.style.background = 'transparent';
    });
  })
});

作業實體。https://codepen.io/ipasha/pen/eYRKxpP

uj5u.com熱心網友回復：

。

table {
  margin: 2rem;
}

th, td {
  border: 1px solid #333;
}

.apple：hover{
  background-color: red
}

html{
  font-size: 24px;
}

< h3>表1</h3>

<table>/span>
  <tr> 
    <th>標題1.1</th>/span>
    <th>標題1.2</th>/span>
    <th>標題1.3</th>/span>
  </tr>/span>
  <tr>/span>
    <td class="apple"/span>> 蘋果</td>
    <td>Orange</td>
    <td>檸檬</td>/span>
  </tr>/span>
  <tr>/span>
    <td>Orange</td>
    <td>檸檬</td>/span>
    <td class="apple"/span>> 蘋果</td>
  </tr>/span>
</table>/span>

uj5u.com熱心網友回復：

這是你可以嘗試的一種方法：

span class="hljs-selector-tag">html {
  字體大小。24px;
}

table {
  margin: 2rem;
}

th, td {
  border: 1px solid #333;
}

td span {
  display: block;
}

td:hover span.apple {
  background-color:red
}

< h3>表1</h3>

<table>/span>
  <tr> 
    <th>標題1.1</th>/span>
    <th>標題1.2</th>/span>
    <th>標題1.3</th>/span>
  </tr>/span>
  <tr>/span>
    <td>span class="apple"> 蘋果</span></td>
    <td><span> 橙色</span></td>/span>
    <td><span> 檸檬</span></td>
  </tr>/span>
  <tr>/span>
    <td><span> 橙色</span></td>/span>
    <td><span> 檸檬</span></td>/span>
    <td>span class="apple"> 蘋果</span></td>
  </tr>/span>
</table>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/333750.html

標籤：

上一篇：使用TailwindCSS將文本居中并將圖示放在右邊

下一篇：在兼容模式下正確使用JQuery