当点击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>