我想在用户选择里面的文本框时更改tr元素的颜色.焦点伪类没有使用它.没有
JavaScript可以实现吗?
HTML:
<table> <tr> <td>Name</td><td><input type="text" name="name"></td> </tr> </table>
CSS:
tr:focus { background:yellow; }
UPDATE1:
看起来没有CSS only方法.使用JavaScript最简单的方法是什么?
解决方法
不.在CSS3中没有主题选择器,但在
CSS4中会有一个.
编辑:
纯JavaScript解决方案可以
var i; var inputs = document.querySelectorAll("tr > td > input"); for(i = 0; i < inputs.length; ++i){ inputs[i].addEventListener('focus',function(e){ this.parentNode.parentNode.className += ' highlight'; }); inputs[i].addEventListener('blur',function(e){ this.parentNode.parentNode.className = this.parentNode.parentNode.className.replace(/\s*highlight\s*/ig,' '); }); }
但是,这在IE≤7中不起作用,因为之前的8节不知道document.querySelectorAll
(demonstration).如果您想要一个免费的跨浏览器解决方案,您可以使用jQuery和以下代码(demonstration):
$("tr > td > input").focus(function(e){ $(this).parent().parent().addClass('highlight'); }).blur(function(e){ $(this).parent().parent().removeClass('highlight'); });
不要忘记在CSS中添加类tr.highlight.请记住,jQuery将在以后的版本中放弃对旧浏览器的支持(参见Browser Support),因此你必须使用jQuery 1.x forIE≤8.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。