单击td中的链接时,如何更改td的背景色
How can I change the background color of a td when a link in the td is clicked?
我尝试过搜索,但被卡住了。基本上我是在做一个危险的游戏板;这是我用表格创建的。我想在点击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");
});
如果有任何帮助,我将不胜感激!
我看到两个问题。首先,您的html中没有包含jquery或javascript文件。您的jsfiddle没有加载jquery。
第二,假设以上只是在Stack Overflow上理解问题的问题,那么在附加事件侦听器之前,您还没有等待文档加载。选择器尝试选择尚未存在的内容,但没有附加任何内容。您需要的是:
$(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>
您可以通过将target="_blank"
属性添加到锚标签来在新窗口中启动链接:
<td><a href="question1.html" id="value" target="_blank">100</a></td>
$('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>
通常,像<a herf="" onclick="">
这样的超链接包含两个事件:onclick和herf。执行顺序---"onclick"在"herf"前面。因此,如果你想翻页,让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>
相关文章:
- 如何通过js更改td的属性
- 更改<td>更改事件的元素值
- 通过指定类更改表格td边框颜色
- 访问特定<td>对于给定<tr>以及更改html
- 如何通过Javascript更改以前TD中的值
- 单击td时,更改bgcolor
- 点击TD更改TD CSS
- 根据输入字段中键入的数字更改td单元格的颜色
- 可以使用javascript将html td更改为链接
- 将表td动态更改为iframe
- 正在更改<td>点击javascript
- 我想在 td 的值发生变化时更改突出显示的 td
- 如果 td 值<则 JQuery 不会更改表行的颜色
- 更改 TD 属性并保留从站点提取的数据中获取值
- 如何更改TD的背景图像
- 无法引发 HTML 表格 TD“更改”事件
- 更改表格中单个单元格(TD)的CSS
- 表TD的更改事件
- 如何在单击时将html中的td标记更改为输入标记
- JQGrid - 弹出框确定的TD标题更改