首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

点击改变行色彩

2013-07-01 
点击改变行颜色!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/

点击改变行颜色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript">

window.onload=function(){
var otr=document.getElementsByTagName("tr");
otr.onclick=function (){
alert(111);
for (var i=0 ;i<otr.length;i++)
{
alert(111);
otr[i].style.display="none";
this.style.background="red";


}
}
}
</script>
</head>

<body><table width="200" border="1" cellspacing="1"  cellpadding="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>


    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>




执行后木有反应  HTML javascript?
[解决办法]
window.onload=function(){
var otr=document.getElementsByTagName("tr");


for(var i=0; i<otr.length; i++) {
    otr[i].onclick=function (){



this.style.background="red";
}
}
}
[解决办法]


table 设置ID="tblMain",脚本使用我提供的,再试
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript">

var tblMain = null;
var objRow = null;
var objOldRow = null;

window.onload=function()
{
tblMain = document.getElementById("tblMain");
for (var i = 0; i < tblMain.rows.length; i++)
{
objRow = tblMain.rows[i];
objRow.onclick = OnRowClick;
}
}

function OnRowClick()
{
objRow = event.srcElement.parentElement;
if (objRow != objOldRow)
{
for (var i = 0; i < objRow.cells.length; i++)
{
if (objOldRow != null)
{
objOldRow.cells[i].style.backgroundColor = "white";
}

objRow.cells[i].style.backgroundColor = "red";
}
}

objOldRow = objRow;
}
</script>
</head>

热点排行