* { margin: 0; padding: 0; } span { display: inline-block; padding: 5px 8px; } li.bg0{ background: lightgoldenrodyellow; } li.bg1{ background: lightpink; } li.bg2{ background: lightcyan; } li.bg3{ background: linen; } li.changeBg{ background: darkmagenta; color: white; }
var oUl = document.createElement("ul"); var oLi = oUl.getElementsByTagName("li"); var str = ''; var oldBg = null; for (var i = 1; i <= 9; i++) { str += '<li>'; for (var j = 1; j <= i; j++) { str += '<span>' + (j + '*' + i + '=' + j * i) + '</span>'; } str += '</li>'; } oUl.innerHTML=str; document.body.appendChild(oUl); for(var i=0;i<oLi.length;i++){ oLi[i].className='bg'+i%4; oLi[i].onmouseover=function(){ oldBg=this.className; this.className='changeBg'; }; oLi[i].onmouseout=function(){ this.className=oldBg; } }