Home > Web Front-end > HTML Tutorial > 'Implementing selection highlighting, incompatible problem on Firefox, please give advice'_html/css_WEB-ITnose

'Implementing selection highlighting, incompatible problem on Firefox, please give advice'_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2016-06-24 12:17:52
Original
1047 people have browsed it

<!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>var  highlightcolor='#eafcd5';//此处clickcolor只能用win系统颜色代码才能成功,如果用#xxxxxx的代码就不行,还没搞清楚为什么:(var  clickcolor='#51b2f6';function  changeto(event){	source=event.srcElement || event.target;	if  (source.tagName=="TR"||source.tagName=="TABLE")	return;	while(source.tagName!="TD")	source=source.parentElement;	//alert(source);	source=source.parentElement;	cs  =  source.children;	//alert(cs);	//alert(cs.length);	if  (cs[1].style.backgroundColor!=highlightcolor&&source.id!="nc"&&cs[1].style.backgroundColor!=clickcolor)	for(i=0;i<cs.length;i++){		cs[i].style.backgroundColor=highlightcolor;	}}function  changeback(event){	if  (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="nc")	return	if  (event.toElement!=source&&cs[1].style.backgroundColor!=clickcolor)	//source.style.backgroundColor=originalcolor	for(i=0;i<cs.length;i++){		cs[i].style.backgroundColor="";	}}</script></head><body><table width="100%" border="0" cellspacing="0" cellpadding="0">      <tr>        <td width="9" background="images/tab_12.gif"> </td>        <td bgcolor="#f3ffe3"><table width="99%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#c0de98" onmouseover="changeto(event)"  onmouseout="changeback(event)">          <tr>            <td width="6%" height="26" background="images/tab_14.gif" class="STYLE1"><div align="center" class="STYLE2 STYLE1">选择</div></td>            <td width="8%" height="18" background="images/tab_14.gif" class="STYLE1"><div align="center" class="STYLE2 STYLE1">序号</div></td>            <td width="24%" height="18" background="images/tab_14.gif" class="STYLE1"><div align="center" class="STYLE2 STYLE1">运行机器ip地址</div></td>          </tr>          <tr>            <td height="18" bgcolor="#FFFFFF"><div align="center" class="STYLE1">              <input name="checkbox" type="checkbox" class="STYLE2" value="checkbox" />            </div></td>            <td height="18" bgcolor="#FFFFFF" class="STYLE2"><div align="center" class="STYLE2 STYLE1">A0012</div></td>            <td height="18" bgcolor="#FFFFFF"><div align="center" class="STYLE2 STYLE1">192.168.0.124</div></td>            <td height="18" bgcolor="#FFFFFF"><div align="center" class="STYLE2 STYLE1">wtz_fh</div></td>          </tr>		  <tr>            <td height="18" bgcolor="#FFFFFF"><div align="center" class="STYLE1">              <input name="checkbox" type="checkbox" class="STYLE2" value="checkbox" />            </div></td>            <td height="18" bgcolor="#FFFFFF" class="STYLE2"><div align="center" class="STYLE2 STYLE1">A0012</div></td>            <td height="18" bgcolor="#FFFFFF"><div align="center" class="STYLE2 STYLE1">192.168.0.124</div></td>            <td height="18" bgcolor="#FFFFFF"><div align="center" class="STYLE2 STYLE1">wtz_fh</div></td>          </tr>        </table></td>        <td width="9" background="images/tab_16.gif"> </td>      </tr>    </table></td>  </tr></table></body></html>
Copy after login


Reply to discussion (solution)

FireFox does not support event.fromElement, event.toElement
It is recommended to use other methods to achieve selection highlighting

You can achieve selection highlighting as shown below, both IE and FireFox are compatible


< ;head>

Untitled Document