我有下面的代码:
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
, 有用;但这可以突出显示一个单元格,如果我尝试同时选择 2 个单元格,则不起作用。有人可以帮忙吗?
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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)