[英]How to highlight Table TD when clicked?
基本上我有一个像下面这样的表格网格,只是更大。
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
并且 iv 使用 CSS 来制作所有 60px x 60px 的方块,它们不包含任何数据,但我希望能够点击单个方块,以便背景颜色发生变化,如果我再次点击它会回到原来的背景颜色。 但我希望能够根据需要突出显示尽可能多的方块。 我知道它会在 JavaScript 中,但是我该怎么做呢?
试试这个:
<table>
<tr>
<td>test 1</td>
<td>test 2</td>
</tr>
<tr>
<td>test 3</td>
<td>test 4</td>
</tr>
</table>
和脚本
window.onload = function(){
var all = document.getElementsByTagName("td");
for (var i=0;i<all.length;i++) {
all[i].onclick = inputClickHandler;
}
};
function inputClickHandler(e){
e = e||window.event;
var tdElm = e.target||e.srcElement;
if(tdElm.style.backgroundColor == 'rgb(255, 0, 0)'){
tdElm.style.backgroundColor = '#fff';
} else {
tdElm.style.backgroundColor = '#f00';
}
}
好吧,我将在 jQuery 中发布代码,因为我从不喜欢标准 JS 选择元素的方式.. ;)
$("td").click(function() {
if($(this).css('background-color') == 'red') { $(this).css('background-color', 'green'); }
else { $(this).css('background-color', 'red'); }
});
在 jQuery 中:
$('td').click(function() {
$(this).toggleClass('active');
});
见: http : //jsfiddle.net/CpGVK/
我喜欢 Mihai Lorga 的回答,因为它使用纯 JavaScript。 然而,jQuery 更容易开发。
$("td").click(function(){
$(this).toggleClass("active");
});
像这样的东西
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.