テーブルが行を隔てて変色し、マウスが通ると変色します.
1384 ワード
HTMLスタイル:
テーブルが行を隔てて変色し、マウスが通ると変色します.
コードは以下の通りです
テーブルが行を隔てて変色し、マウスが通ると変色します.
コードは以下の通りです
js :
<script language="javascript">
function show(){
var tab=document.getElementById("tab");
var tr=tab.getElementsByTagName("tr");
for(var i=0;i<=tr.length;i++){
if(i%2==0){
tr[i].style.backgroundColor="#ccc";
tr[i].onmouseover=function(){this.style.background="red"};
tr[i].onmouseout=function(){this.style.background="#ccc"}
}else{
tr[i].style.backgroundColor="#fff";
tr[i].onmouseover=function(){this.style.background="red"};
tr[i].onmouseout=function(){this.style.background="#fff"}
}
}
}
window.onload=show;
</script>
html :
<table id="tab">
<tr><td>dfdsf</td><td>dfdsf</td></tr>
<tr><td>dfdsf</td><td>dfdsf</td></tr>
<tr><td>dfdsf</td><td>dfdsf</td></tr>
<tr><td>dfdsf</td><td>dfdsf</td></tr>
<tr><td>dfdsf</td><td>dfdsf</td></tr>
</table>
web :http://www.uedcss.com/post/tablechangecolor.html