changing background of elements in loop, then change hover color as well

Question

$(function () {
    var forum = $('.main-content .statused tr'),
        i, 
    myColors = ["#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#8A4B08","#084B8A","#8A0868","#6A0888","#21610B","#8A0808","#0B4C5F","#5E610B","#210B61"],
    myHoverColors=["#FFE8E9","#FFE8E9","#FFE8E9","FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FF8000","#0080FF","#FF0080","#A901DB","#04B404","#FF0000","#01DFD7","#FFFF00","#4000FF"];
    for (i = 0; i < myColors.length; i++) {
        if (!forum[i]) return;
        forum[i].style.backgroundColor = myColors[i];
    }
});

The above code works (thought it did now it is not look at bottom) perfectly fine thanks to someone here on SO What i added to it though is the myHoverColors, and what I am trying to do is change the hover color just like I did with the main background. Here was my try which ruined the entire code

$(function () {
    var forum = $('.main-content .statused tr'),
        i, 
myColors = ["#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#FFF","#8A4B08","#084B8A","#8A0868","#6A0888","#21610B","#8A0808","#0B4C5F","#5E610B","#210B61"],
myHoverColors=["#FFE8E9","#FFE8E9","#FFE8E9","FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FFE8E9","#FF8000","#0080FF","#FF0080","#A901DB","#04B404","#FF0000","#01DFD7","#FFFF00","#4000FF"];
    for (i = 0; i < myColors.length; i++) {
        if (!forum[i]) return;
        forum[i].style.backgroundColor = myColors[i];
    }

//my hover try
$(forum).hover(function() {
   for (i = 0; i < myHoverColors.length; i++) {
         if (!forum[i]) return;
          forum[i].style.backgroundColor = myHoverColors[i];
     }
  });
});

What it does is when you hover it completely destroys the code altogether. And I believe this is because I am trying to change the color like I did in the regular code above. Does anyone have suggestions on how to add a hover color like the main code I posted with an array of colors?

ONE MORE TRY WITH COLOR CODE THAT WORKS

$(function() {
   var forum = $('.main-content .statused tr'),i;
   var myColors = ["#000","#F00","#FF0","#FFF","#0F0","#00F"];
   var myHoverColors = ["#FF0000","#000","#FFF","#00FF00","#0000ff"];
   var i = 0;
     for(var j=0;j<forum.length;j++) {
       forumBG= forum[j];
       if(!forumBG) return;
          forum[j].style.background =myColors[i];
        if(i == myColors.length -1){
          i= 0;
       }else{
          i++;
      }
     }

  $(forum).on('mouseenter',function() {
      for(var j=0;j<forum.length;j++) {
         forumBG= forum[j];
          if(!forumBG) return;
       forum[j].style.background =myHoverColors[i];
         if(i == myColors.length -1){
          i= 0;
      }else{
          i++;
      }
    }
 });
    $(forum).on('mouseleave',function() {
      for(var j=0;j<forum.length;j++) {
      forumBG= forum[j];
       if(!forumBG) return;
      forum[j].style.background =myColors[i];
    if(i == myColors.length -1){
        i= 0;
     }else{
         i++;
     }
   }
 });
});

Answer 1

I was able to convert your code into pure javascript because it appears that you are wrongly mixing JQuery with JavaScript.

var i, x, forum = document.getElementsByClassName('main-content')[0].getElementsByClassName('statused')[0].getElementsByTagName('tr'),
    myColors = ["#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#8A4B08", "#084B8A", "#8A0868", "#6A0888", "#21610B", "#8A0808", "#0B4C5F", "#5E610B", "#210B61"],
    myHoverColors = ["#FFE8E9", "#FFE8E9", "#FFE8E9", "FFE8E9", "#FFE8E9", "#FFE8E9", "#FFE8E9", "#FFE8E9", "#FFE8E9", "#FFE8E9", "#FFE8E9", "#FFE8E9", "#FFE8E9", "#FFE8E9", "#FF8000", "#0080FF", "#FF0080", "#A901DB", "#04B404", "#FF0000", "#01DFD7", "#FFFF00", "#4000FF"];
i = myColors.length--;
while (i--) { // backwards loop
 if (typeof forum[i] !== "undefined") forum[i].style.backgroundColor = myColors[i];
 // an undefined index will break the script
}

function handle(x) {
  forum[x].onmouseover = function () {
    forum[x].style.backgroundColor = myHoverColors[x];
  };
  forum[x].onmouseout = function () {
    forum[x].style.backgroundColor = myColors[x];
  };
}

x = forum.length--;
while (x--) handle(x);

And btw in your 'hover try', every time an element is hovered, you loop over every sister node; that's a Big performance hit
Working fiddle .