javascript jQuery：更改一个表格单元格的边框颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4936547/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: Change the border color of ONE table cell
提问by nrj
I have a simple HTML table of options here:
我在这里有一个简单的 HTML 选项表：
<table>
<tr>
<td>blue</td>
<td>green</td>
</tr>
<tr>
<td>red</td>
<td>cream</td>
</tr>
</table>
The CSS with the relevant styles:
具有相关样式的 CSS：
td { background-color: #FFF; border: 1px solid #3F3F3F; cursor: pointer; }
td.selected { color: #D93A2C; border: 1px solid #D93A2C; }
Looks like this:
看起来像这样：
When I click on one of the table cells, I want the border and text to be red. So I use jQuery to toggle the '.selected' class using the following code.
当我单击其中一个表格单元格时，我希望边框和文本为红色。因此，我使用 jQuery 使用以下代码切换“.selected”类。
$('td').each(function(){
$(this).click(function(){
$(this).toggleClass('selected');
});
});
However the result is this:
然而结果是这样的：
The first table cell (blue) is the only one that looks as I want when selected. I need all the borders of the selected cell to be highlighted.
第一个表格单元格（蓝色）是唯一一个在选择时看起来像我想要的。我需要突出显示所选单元格的所有边框。
Any ideas on how to achieve this? I'm not opposed to ditching tables if someone can suggest a better way.
关于如何实现这一目标的任何想法？如果有人可以提出更好的方法，我不反对放弃桌子。
回答by drudge
This works nicely for me:
这对我来说很好用：
<style type="text/css">
table { border: 1px solid #000; border-collapse: collapse; }
td { border-top: 1px solid #000; border-left: 1px solid #000; }
td.selected { border: 1px solid #F00; }
</style>
<table>
<tr>
<td>blue</td>
<td>green</td>
</tr>
<tr>
<td>red</td>
<td class="selected">yellow</td>
</tr>
</table>
回答by subhaze
Here is a veryhack'ish way of getting the job done, might spark an idea on your end to produce something better... I've not fully tested it across browsers but worked on IE8,chrome,FF. Live example
这是完成工作的一种非常hack'ish的方式，可能会激发你的想法以产生更好的东西......我没有在浏览器上对其进行全面测试，但在IE8，chrome，FF上工作。活生生的例子
HTML
HTML
<table>
<tbody>
<tr>
<td>XYZ</td>
<td>asdf</td>
<td>2346</td>
</tr>
<tr>
<td>XYZ</td>
<td>asdf</td>
<td>2346</td>
</tr>
<tr>
<td>XYZ</td>
<td>asdf</td>
<td>2346</td>
</tr>
</tbody>
</table>
JS
JS
$('td').each(function(){
$(this).click(function(){
$(this).toggleClass('selected');
$(this).prev('td').css('border-right','#ff0000');
$(this).parent().prev('tr').find('td:nth-child('+(this.cellIndex+1)+')').css('border-bottom','#ff0000')
});
});
CSS
CSS
table{
border-collapse: collapse;
}
td { border: 1px solid #ccc; padding:3px }
.selected{
border-color:#ff0000;
color:#ff0000;
}
.selected-bottom{
border-bottom-color:#ff0000;
}
.selected-right{
border-right-color:#ff0000;
}
回答by Diodeus - James MacFarlane
It's easier to put a DIV in each cell then add the treatment to the DIV.
将 DIV 放在每个单元格中然后将处理添加到 DIV 会更容易。
