javascript - D3 - Returning a table row to original bgcolor on mouseout -

apologies newbie question, i'm trying following using d3:

1) render alternating rows grey , white (zebra style) 2) highlight rows on mouseover event 3) return row original state on mouseout

i've done via following code, works fine except returning rows original color on mouseout. instead, renders every row #c4c4c4 on mouseout

var rows = tbody.selectall("tr")     data(states)     .enter()     .append("tr")     .style("background-color", function(d, i) {        if (i%2===0){return "#fff";}else{return "#c4c4c4";}       });   var rows = tbody.selectall("tr")      .on("mouseover", function(){          d3.select(this).style("background-color", "yellow");})      .on("mouseout", function(){          d3.select(this).style("background-color", function(d,i) {             if (i % 2 === 0){                return "#fff";              }             else {                return "#c4c4c4";              }         }     )} 

the problem when re-select this element, becomes selection i index determined inner (style) callback function. want i index mouseout event handling function:

 .on("mouseout", function(d,i){ //correct index passed here!       d3.select(this).style("background-color", function(d2,j) {                             //d2 same d, j 0                             //since d3.select(this) has 1 element         if (i % 2 === 0){            return "#fff";          }         else {            return "#c4c4c4";          }     } )  }); 

you don't need declare parameters d2 , j, since they're never used -- included them clarity.

by way, can both of these effects css:

tr:nth-of-type(2n) { /* rows */   background-color: #c4c4c4; } tr:nth-of-type(2n+1) { /* odd rows */   background-color: #fff; } tr:hover { /* mouseover */   background-color: yellow; } 

note in css, elements numbered starting 1, first row considered odd row.