I have tried everything i know and can't get an alterate tablerow class to work , without having all the rows duplicated or having a bunch of dummy rows inserted

Here is what i have

<script>
fetch("https://www63.myfantasyleague.com/2021/export?TYPE=league&L=43570&JSON=1").then(
  res => {
    res.json().then(
      data => {
        console.log(data.league.franchises.franchise);
        if (data.league.franchises.franchise.length > 0) {
          var temp = "";
          temp += "<table id='league_emails'>";
          temp += "<tbody>";
          temp += "<tr><th>Franchise</th><th>Owner Name</th><th>Email</th></tr>";
          data.league.franchises.franchise.forEach((itemData) => {

            for (var i = 0; i < data.league.franchises.franchise.length; i++) {
              if (i % 2)
                temp += '<tr class="eventablerow">';
              else
                temp += '<tr class="oddtablerow">';

            }

            temp += "<td>" + itemData.name + "</td>";
            temp += "<td>" + itemData.owner_name + "</td>";
            temp += "<td>" + itemData.email + "</td>";

          });
          temp += "</tbody>";
          temp += "</table>";
          document.getElementsByClassName('commish_league_safe')[0].innerHTML = temp;
        }
      }
    )
  }
)
</script>
<div class="commish_league_safe"></div>

The issue lays here and i have tried a dozen things and wrapped it different ways

for (var i = 0; i < data.league.franchises.franchise.length; i++) {
    if (i % 2)
        temp += '<tr class="eventablerow">';
    else
        temp += '<tr class="oddtablerow">';

}