當點擊td中的鏈接時，如何更改td的背景顏色？

Question

我嘗試過搜索，但我被卡住了。 基本上我在製作一個危險的遊戲板;我使用表格創建的。我想在點擊後改變td的背景顏色。我面臨的挑戰是（1）我正在使用一個鏈接來直接回答問題/答案（是的，我知道這可以通過其他方式完成，但我需要學習更多的進展，並且我正在努力）。 （2）在尋找答案之後，我似乎無法讓它與我擁有的代碼一起工作。

這裏是我的[的jsfiddle] https://jsfiddle.net/hLyauL5a/）

Html: 
<table> 
    <thead> 
    <tr> 
     <th>Stuff</th> 
     <th>Stuff </th> 
     <th>Stuff</th> 
     <th>Stuff</th> 
     <th>Stuff</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td><a href="question1.html" id="value">100</a></td> 
     <td><a href="question2.html" id="value">100</a></td> 
     <td><a href="question3.html" id="value">100</a></td> 
     <td><a href="question4.html" id="value">100</a></td> 
     <td><a href="question5.html" id="value">100</a></td> 
    </tr> 
    <tr> 
     <td><a href="question6.html" id="value">200</a></td> 
     <td><a href="question7.html" id="value">200</a></td> 
     <td><a href="question8.html" id="value">200</a></td> 
     <td><a href="question9.html" id="value">200</a></td> 
     <td><a href="question10.html" id="value">200</a></td> 
    </tr> 
    <tr> 
     <td><a href="question11.html" id="value">300</a></td> 
     <td><a href="question12.html" id="value">300</a></td> 
     <td><a href="question13.html" id="value">300</a></td> 
     <td><a href="question14.html" id="value">300</a></td> 
     <td><a href="question15.html" id="value">300</a></td> 
    </tr> 
    <tr> 
     <td><a href="question16.html" id="value">400</a></td> 
     <td><a href="question17.html" id="value">400</a></td> 
     <td><a href="question18.html" id="value">400</a></td> 
     <td><a href="question19.html" id="value">400</a></td> 
     <td><a href="question20.html" id="value">400</a></td> 
    </tr> 
    <tr> 
     <td><a href="question21.html" id="value">500</a></td> 
     <td><a href="question22.html" id="value">500</a></td> 
     <td><a href="question23.html" id="value">500</a></td> 
     <td><a href="question24.html" id="value">500</a></td> 
     <td><a href="question25.html" id="value">500</a></td> 
    </tr> 

    </tbody> 
</table> 


CSS: 



jQuery code: 
$("table tr td").click(function() { 
    $(this).css("background", "#626975"); 
}); 

我希望得到任何幫助！

Answer 1

我看到兩個問題。一，你沒有在你的html中包含jquery或你的JavaScript文件。你的jsfiddle沒有加載jquery。

二，假設上面的問題只是在堆棧溢出問題上得到解決的問題，您在附加事件偵聽器之前沒有等待文檔加載。選擇器試圖選擇那些還沒有的東西，但沒有附加任何東西。你需要的是：

$(document).on('ready', function(){ 
    $("table tr td").click(function(e) { 
    $(this).css("background", "#626975"); 
    }); 
}); 

工作例如：

$(()=> { 
 
    $("table tr td").click(function() { 
 
    $(this).css("background", "#626975"); 
 
    }); 
 
});

body { 
 
    cursor: pointer; 
 
} 
 
/*gameboard*/ 
 

 
table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
} 
 
tr { 
 
    background: #1f293a; 
 
    color: #47ba04; 
 
} 
 
th { 
 
    background: #1f293a; 
 
    color: white; 
 
    font-weight: bold; 
 
    min-width: 200px; 
 
} 
 
td { 
 
    color: #47ba04; 
 
    background: #1f293a; 
 
    min-width: 100px; 
 
    height: 130px; 
 
} 
 
td, 
 
th { 
 
    padding: 6px; 
 
    border: 1px solid #ccc; 
 
    text-align: center; 
 
} 
 
a { 
 
    color: #47ba04; 
 
    text-decoration: none; 
 
} 
 
/* For the question pages*/ 
 

 
#question, 
 
#answers { 
 
    width: 100%; 
 
    height: 800px; 
 
    border: 1px solid black; 
 
    background-color: #1f293a; 
 
    color: white; 
 
    font-weight: bold; 
 
} 
 
div.question h2, 
 
div.answers h2 { 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 40%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Stuff</th> 
 
     <th>Stuff</th> 
 
     <th>Stuff</th> 
 
     <th>Stuff</th> 
 
     <th>Stuff</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td><a href="question1.html" id="value">100</a> 
 
     </td> 
 
     <td><a href="question2.html" id="value">100</a> 
 
     </td> 
 
     <td><a href="question3.html" id="value">100</a> 
 
     </td> 
 
     <td><a href="question4.html" id="value">100</a> 
 
     </td> 
 
     <td><a href="question5.html" id="value">100</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="question6.html" id="value">200</a> 
 
     </td> 
 
     <td><a href="question7.html" id="value">200</a> 
 
     </td> 
 
     <td><a href="question8.html" id="value">200</a> 
 
     </td> 
 
     <td><a href="question9.html" id="value">200</a> 
 
     </td> 
 
     <td><a href="question10.html" id="value">200</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="question11.html" id="value">300</a> 
 
     </td> 
 
     <td><a href="question12.html" id="value">300</a> 
 
     </td> 
 
     <td><a href="question13.html" id="value">300</a> 
 
     </td> 
 
     <td><a href="question14.html" id="value">300</a> 
 
     </td> 
 
     <td><a href="question15.html" id="value">300</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="question16.html" id="value">400</a> 
 
     </td> 
 
     <td><a href="question17.html" id="value">400</a> 
 
     </td> 
 
     <td><a href="question18.html" id="value">400</a> 
 
     </td> 
 
     <td><a href="question19.html" id="value">400</a> 
 
     </td> 
 
     <td><a href="question20.html" id="value">400</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="question21.html" id="value">500</a> 
 
     </td> 
 
     <td><a href="question22.html" id="value">500</a> 
 
     </td> 
 
     <td><a href="question23.html" id="value">500</a> 
 
     </td> 
 
     <td><a href="question24.html" id="value">500</a> 
 
     </td> 
 
     <td><a href="question25.html" id="value">500</a> 
 
     </td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>

Answer 2

$('a').click(function(e){ 
       e.preventDefault(); 
       $(this).parent().css('background-color','blue'); 
      }); 

因此，使用JQuery，如果你點擊一個標籤，不要在任何環節是，可以防止違約事件跳，那麼你得到其父是該元素，添加CSS樣式如圖所示。這裏是我作爲一個例子，HTML：

<table> 
 
    <tr> 
 
    <th>Month</th> 
 
    <th>Savings</th> 
 
    </tr> 
 
    <tr> 
 
     <td ><a href="/link">Table</a></td> 
 
    <td bgcolor="#00FF00">$100</td> 
 
    </tr>

Answer 3

您可以通過添加target="_blank"屬性的錨標記推出在新窗口中的鏈接：

<td><a href="question1.html" id="value" target="_blank">100</a></td> 

Answer 4

一般情況下，超鏈接一樣<a herf="" onclick="">包含兩個事件：的onclick和HERF。執行順序---在'herf'前面的'onclick'。所以如果你想要頁面，onclick方法返回'false'，當你點擊超鏈接時，它不能跳轉到任何鏈接上。代碼如下。

$(function(){ 
 
    $("a").on("click",function(){ 
 
    $(this).css("background", "#626975"); 
 
    return false; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Stuff</th> 
 
     <th>Stuff</th> 
 
     <th>Stuff</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td><a href="question1.html" id="value">100</a></td> 
 
     <td><a href="question2.html" id="value">100</a></td> 
 
     <td><a href="question3.html" id="value">100</a></td> 
 
    </tr> 
 
    </tbody> 
 
</table>