日期:2014-05-16  浏览次数:20334 次

关于控制table里面的input
想实现这样的效果:

<table   class= "info ">
<tr>
<td> <input   type= "text "   class= "form_input "   ...   /> </td>
<td> <input   type= "text "   class= "form_input "   ...   /> </td>
<td> <input   type= "button "   ...     /> </td>
</tr>
</table>

当鼠标放在 <input> 上时(只针对在class= "info "的table中,并且type= "text "的input), <input> 的样式改变(比如背景改变),如果实现?不能在 <input> 里面写脚本,也不需要通过按钮来触发此功能,页面载入完成就实现此功能.


------解决方案--------------------
<script>
function chg(){
var tbls = document.getElementsByTagName( "TABLE ");
var infotbls = new Array();
var txtList = new Array();
for(var i=0;i <tbls.length;i++){
if(tbls[i].className== "info ") infotbls[infotbls.length]=tbls[i];
}
for(var i=0;i <infotbls.length;i++){
var list = infotbls[i].getElementsByTagName( "INPUT ");
for(var j=0;j <list.length;j++){
if(list[j].type== "text ") txtList[txtList.length] = list[j];
}
}

for(var i=0;i <txtList.length;i++){txtList[i].className= "xxxx ";}
}
window.onload=function(){chg()}
</script>
------解决方案--------------------
<table class= "info " onmouseover=a() onmouseout=b() >
<tr>
<td> <input type= "text " class= "form_input " ... /> </td>
<td> <input type= "text " class= "form_input " ... /> </td>
<td> <input type= "button " ... /> </td>
</tr>
</table>
<script>
function a()
{
var o=event.toElement;
if(o.type== "text ") o.style.backgroundColor= 'red ';
}
function b()
{
var o=event.fromElement;
if(o.type== "text ") o.style.removeAttribute( "backgroundColor ");
}
</script>
------解决方案--------------------
ff:
txtList[i].onmouseover = function(ev){ev.target.className= "abc ";}
整合下就可以了