我有我与行悬停功能表,我试图去改变它在细胞中而不是徘徊
这里是我当前的脚本:
<script type="text/javascript">
window.onload=function(){
var tfrow = document.getElementById('tfhover').rows.length;
var tbRow=[];
for (var i=1;i<tfrow;i++) {
tbRow[i]=document.getElementById('tfhover').rows[i];
tbRow[i].onmouseover = function(){
this.style.backgroundColor = '#f3f8aa';
};
tbRow[i].onmouseout = function() {
this.style.backgroundColor = '#ffffff';
};
}
};
</script>
在这里,我试图改变,但迄今为止仍然没有工作:
<script type="text/javascript">
window.onload=function(){
var tfcell = document.getElementById('tfhover').cells.length;
var tbCell=[];
for (var i=1;i<tfcell;i++) {
tbCell[i]=document.getElementById('tfhover').cells[i];
tbCell[i].onmouseover = function(){
this.style.backgroundColor = '#f3f8aa';
};
tbCell[i].onmouseout = function() {
this.style.backgroundColor = '#ffffff';
};
}
};
</script>
我如何能实现对细胞悬停,而不是在排悬停我的脚本?
你可以使用普通CSS用于此目的:
#tfhover td {
background-color: #fff;
}
#tfhover td:hover {
background-color: #f3f8aa;
}
由于@Mike布兰特您指出缺少的表ID
要回答你的问题......这是怎么用jQuery做到这一点:
$('#tfhover td').hover(function() {
$(this).css('background-color', '#fsf8aa');
}, function () {
$(this).css('background-color', '#ffffff');
});
当然,你的榜样无关的jQuery。它只是提醒要简单得多,这些事情就变得如何使用jQuery。
细胞是行的列表,如行是在表的列表。
为了得到一个细胞,只是的document.getElementById( 'tfhover')。行[I] .cells [J]。无论是列出了从0开始。
<script type="text/javascript">
window.onload=function(){
var tfrow = document.getElementById('tfhover').rows.length;
var tbRow=[];
for (var i=1;i<tfrow;i++) {
tbRow[i]=document.getElementById('tfhover').rows[i];
var tfcell=tbRow[i].cells.length;
for(var j=0;j<tfcell;j++){
var _tbCell=tbRow[i].cells[j];
_tbCell.onmouseover=function(){
this.style.backgroundColor = '#f3f8aa';
}
_tbCell.onmouseout=function(){
this.style.backgroundColor = '#ffffff';
}
}
}
};
</script>