单击时高亮显示单元格边框颜色,单击时改回其他颜色
Highlight cell border color when click, change back when click to others
我有下面的代码:
function highlight(cell){
cell.style.borderColor = "red";
}
function originalColor(cell){
cell.style.borderColor = "black";
}
td{
cursor: pointer;
}
<table border="1">
<tr>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 1</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 2</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 3</td>
</tr>
<tr>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 4</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 5</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 6</td>
</tr>
<tr>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 7</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 8</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 9</td>
</tr>
</table>
当单击时,它会将边框高亮显示为红色,当单击另一个单元格时,它可能会变回黑色,但它不起作用,我尝试了onmouseup
、onmouseover
,它不起我想要的作用。
我尝试过的技术是使用tabindex
,它是有效的;但这可以突出显示一个单元格,如果我试图同时选择两个单元格,那就行不通了。有人能帮忙吗?
var redNow = 1;
function highlight(cell) {
redNow == 1 ? redNow = 0 : redNow.style.borderColor = "black";
redNow = cell;
cell.style.borderColor = "red";
}
td {
cursor: pointer;
}
<table border="1">
<tr>
<td onmousedown="highlight(this);">Cell 1</td>
<td onmousedown="highlight(this);">Cell 2</td>
<td onmousedown="highlight(this);">Cell 3</td>
</tr>
<tr>
<td onmousedown="highlight(this);">Cell 4</td>
<td onmousedown="highlight(this);">Cell 5</td>
<td onmousedown="highlight(this);">Cell 6</td>
</tr>
<tr>
<td onmousedown="highlight(this);">Cell 7</td>
<td onmousedown="highlight(this);">Cell 8</td>
<td onmousedown="highlight(this);">Cell 9</td>
</tr>
</table>
在您的澄清评论之后,如果我理解正确,您希望在单击单元格时高亮显示它,如果您选择通过单击另一个元素来删除高亮显示。如果没有,请再次澄清。如果确实是这样的话,那么下面的代码将通过向上遍历DOM到父表,然后遍历所有单元格并采取适当的操作来工作:
function toggleBorderColor(c) {
cells = c.parentElement.parentElement.getElementsByTagName('td');
for (var i in cells) {
var cell = cells.item(i);
cell.style.borderColor = (cell != c) ? "" : "red";
}
}
td {
cursor: pointer;
}
<table border="1">
<tr>
<td onmousedown="toggleBorderColor(this);">Cell 1</td>
<td onmousedown="toggleBorderColor(this);">Cell 2</td>
<td onmousedown="toggleBorderColor(this);">Cell 3</td>
</tr>
<tr>
<td onmousedown="toggleBorderColor(this);">Cell 4</td>
<td onmousedown="toggleBorderColor(this);">Cell 5</td>
<td onmousedown="toggleBorderColor(this);">Cell 6</td>
</tr>
<tr>
<td onmousedown="toggleBorderColor(this);">Cell 7</td>
<td onmousedown="toggleBorderColor(this);">Cell 8</td>
<td onmousedown="toggleBorderColor(this);">Cell 9</td>
</tr>
</table>
相关文章:
- Javascript对象类在单击时打开窗口进行颜色选择,并在更改时替换对象背景颜色
- 使用Angular单击时更改特定图示符图标的颜色
- 单击时将文本的颜色更改为随机颜色(按钮)
- 如何在鼠标单击时更改KML多边形的颜色
- 单击ng更改列表项的活动bg颜色
- 将上次单击的按钮和访问过的按钮(未访问过的)的颜色分开
- 如何在单击按钮时更改整行的颜色
- 使用 jQuery 单击链接时更改链接背景颜色
- 通过右键单击更改完整日历中事件的背景颜色 - 不起作用
- 尝试在单击时使用Jquery更改html的背景颜色
- Adobe Acrobat X疑难解答下拉列表颜色选择.需要单击选择
- 单击按钮更改颜色/清除画布时画布出现问题
- 单击时更改点颜色
- 每次单击按钮时随机选择颜色
- 单击时更改元素的颜色
- 当再次单击时,我希望颜色消失.(喜欢/讨厌按钮,一切都可以,但如果我点击两次喜欢按钮,我希望颜色消失)
- Jquery单击颜色
- 单击时更改行颜色-ASP.NET和JavaScript
- 如何在绘图应用程序上单击颜色时播放声音
- 可单击颜色框更改聊天气泡的颜色