在 HTML 表格中选择和取消选择 td
[英]select and unselect td inside an HTML table
问题描述
I have a table in my website that I want to be able to select one cell and the background color change, then select another cell (not in the same row) and have the first cell go back to the default color while the newly selected cell change background color.
我的网站中有一个表格，我希望能够选择一个单元格并更改背景颜色，然后选择另一个单元格（不在同一行中）并使第一个单元格返回默认颜色，而新选择的单元格改变背景颜色。 I've looked around and can only seem to find stuff that I've already got or something about a bunch of checkboxes.我环顾四周，似乎只能找到我已经拥有的东西或关于一堆复选框的东西。 I have a Fiddle here .我这里有一个小提琴。
Here's my CSS:这是我的 CSS：
.selected {
background-color: rgba(0,0,0,0.4) !important;
color: #fff;
}
Here's my jquery:这是我的jQuery：
<script type='text/javascript'>//<![CDATA[
$("#table2 td").click(function ()
{
$(this).toggleClass('selected').siblings().removeClass('selected');
});
//]]>
</script>
<script type='text/javascript'>//<![CDATA[
$("#table tr").click(function ()
{
$(this).toggleClass('selected').siblings().removeClass('selected');
});
//]]>
</script>
Here's my HTML:这是我的 HTML：
<body>
<table id='table'>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
</table>
<br><br>
<table id='table2'>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
</tbody>
</table>
</body>
I can get table to work fine selecting and unselecting rows, but table2 doesn't work correctly.我可以让table在选择和取消选择行时正常工作，但table2无法正常工作。 I select a cell in one row and then select a cell in the same row and it works, but if I select a cell in another row it does not change the first cell back to the default color.我在一行中选择一个单元格，然后在同一行中选择一个单元格，它可以工作，但是如果我在另一行中选择一个单元格，它不会将第一个单元格更改回默认颜色。 The fiddle above shows what is happening.上面的小提琴显示了正在发生的事情。
I tried adding a <tbody> , but I don't think that I did it correctly as the results did not change.我尝试添加一个<tbody> ，但我不认为我做对了，因为结果没有改变。
I tried adding $('.selected').removeClass('selected');我尝试添加$('.selected').removeClass('selected'); and it partly worked.它部分起作用了。 I can select a cell in one row then select a cell in another row and the background colors change correctly, but if I select the first cell a second time it does not unselect.我可以在一行中选择一个单元格，然后在另一行中选择一个单元格，背景颜色会正确更改，但是如果我第二次选择第一个单元格，它不会取消选择。
4 个解决方案
解决方案1
2 已采纳 2016-07-28 18:14:17
解决方案2
1 2016-07-28 18:16:26
It's not performing as you want in table2 because you're calling the .sibling() method, but expecting it to change elements that aren't siblings.它在 table2 中没有按照您想要的方式执行，因为您正在调用 .sibling() 方法，但期望它更改不是兄弟的元素。 The td's in this row: td 在这一行：
<tr>
<td>January</td>
<td>$100</td>
</tr>
are not siblings of the ones in this row:不是这一行的兄弟姐妹：
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
Adjust your code inside your click event to something like:将点击事件中的代码调整为如下所示：
$(this).closest('table').find('td').not(this).removeClass('selected');
解决方案3
0 2016-07-28 17:58:38
You can wrap your header row in <thead></thead> tags and the body rows in <tbody></tbody> tags and then use:您可以将标题行包裹在<thead></thead>标签中，将正文行包裹在<tbody></tbody>标签中，然后使用：
$("#table tbody tr, #table2 tbody tr").click(function() {
$(this).siblings().removeClass('selected').end().addBack().toggleClass('selected');
});
解决方案4
0 2021-05-26 18:36:10
Create a css style for the style of your selected cell.为所选单元格的样式创建一个 css 样式。
Then toggle that style for each situation (clicked / not clicked) and remove the 'selected' class from the rest of the cells.然后为每种情况切换该样式（单击/未单击）并从其余单元格中删除“选定”类。
CSS CSS
.selected {
color: rgb(252, 69, 69);
}
In Jquery when cell is selected ...在 Jquery 中选择单元格时...
$(function(){
$('body').on('click','table tr',function(e){
e.preventDefault();
$(this).toggleClass('selected').siblings().removeClass('selected');
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.