I found some information from the Internet today. js and css are combined with the table mouse to change color, and the table changes color every other row. However, there is a problem in the code, which is very serious. After adding these codes, all the tables on the page are affected. How to modify the CSS code so that the style is only used for the bb table and not for other tables. Experts can help me, how can I modify the code under guidance?
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#bb th,td{text-align:left;padding:.5em;border:1px solid #fff;}#bb th{background-color:#328aa4;color:#fff;}td{background:#e5f1f4;}tr.even td{background:#e5f1f4;}tr.odd td{background:#f8fbfc;}tr.over td{background:#bce774;}tr.out td{}</style></head><script type="text/javascript">function changeTableBg(){ if(document.getElementById("bb")== null) { return false; } var changeTr=document.getElementById("bb").getElementsByTagName("tr"); for(i=0;i<changeTr.length;i++) { changeTr[i].className=(i%2>0)?"even":"odd"; changeTr[i].temp=changeTr[i].className; changeTr[i].onmouseover=function() { this.className='over'; } changeTr[i].onmouseout=function() { this.className=this.temp; } }}</script><body onLoad="changeTableBg()">......
#bb td{background:#e5f1f4;}#bb tr.even td{background:#e5f1f4;}#bb tr.odd td{background:#f8fbfc;}#bb tr.over td{background:#bce774;}#bb tr.out td{}
Thank you for your advice