Eu tenho o código abaixo:

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>

Ele destacará a borda para vermelho quando clicar, quando clicar na outra célula, suponha voltar à cor preta, mas não funcionar, eu tentoonmouseup, onmouseover, não funciona como o que eu quero.

A técnica que tentei está usandotabindex, funciona; mas isso pode destacar uma célula; se eu tentar selecionar duas células ao mesmo tempo, não funcionará. Alguém pode ajudar?