单击时突出显示单元格边框颜色，单击其他时更改回来 [英] 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 ，它不能正常工作。

It will highlight the border to red when click, when click to the other cell, it suppose change back to black color, but it doesn't work, I try onmouseup, onmouseover, it doesn't work as what I want.

我试过的技术是使用 tabindex ，它有效;但是这可以突出显示一个单元格，如果我尝试同时选择2个单元格，则不起作用。有人可以帮忙吗？

The technique I'hv tried is using tabindex, it works; but that can highlight one cell, if I try to select 2 cells at the same time, it doesn't work. Anyone can help?

推荐答案

    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>




这篇关于单击时突出显示单元格边框颜色，单击其他时更改回来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！