Question

我有以下代码：

＆＃13;

function highlight(cell){
		cell.style.borderColor = "red";
	}
	
	function originalColor(cell){
		cell.style.borderColor = "black";
	}

＆＃13;

td{
		cursor: pointer;
	}

＆＃13;

<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>

＆＃13;

点击时会突出显示红色的边框，当点击其他单元格时，它会改回黑色，但它不起作用，我试试onmouseup，onmouseover ，它并不像我想要的那样工作。

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

Answer 1

在澄清评论之后，如果我理解正确，您需要在单击时突出显示单元格，如果您通过单击其他元素选择，则删除突出显示。如果没有，请再次澄清。如果确实如此，那么下面的代码将通过遍历DOM到父表，然后遍历所有单元格并采取适当的操作来工作：

＆＃13;

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";
    }
}

＆＃13;

td {
	cursor: pointer;
}

＆＃13;

<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>

＆＃13;

Answer 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>

单击时突出显示单元格边框颜色，单击其他时更改回来

2 个答案: