The Code

//Get the user input from the page
function GetValues() {
  //Get the values from the page
  let startValue = document.getElementById('startValue').value;
  let endValue = document.getElementById('endValue').value;

  //Parse our inputs into numbers
  startValue = parseInt(startValue);
  endValue = parseInt(endValue);

  //Verify our inputs are numbers
  if (Number.isInteger(startValue) && Number.isInteger(endValue)) {
    //If they are numbers, generate on the page
    let numbersArray = GenerateNumbers(startValue, endValue)
    DisplayNumbers(numbersArray);
  }
  else
  {
    //If they are not, tell the user
    Swal.fire({
        icon: 'error',
        title: 'Oops!',
        text: 'Only integers are allowed for Perator'
      });
  }
}

//Generate our numbers
function GenerateNumbers(start, end) {
  let numbers = [];

  for (let i=start; i <= end; i++) {

    numbers.push(i);
  }

  return numbers;
}

//Display them on the page
function DisplayNumbers(numbersArray) {
  let tableBody = document.getElementById('results');
  let tableHTML="";

  for(let i=0; i < numbersArray.length; i++){
    let value = numbersArray[i];
    className='';

    /* If the value is even make the className even,
    else its className will be odd*/
    if(value%2==0){
      className='even';
    }
    else{
      className = 'odd'
    }

    /* To make the table easier to read, start a new
    row every 5 indexed values*/
    if(i%5==0){
      tableHTML+=''
    }

    // Generate the td HTML and append it to the table html
    let tableRow=`${value}`;
    tableHTML += tableRow;

    /*Check if the next index is divisible by 5 and if so
    close our tr tag on the current row*/
    if((i+1)%5==0){
      tableHTML+='';
    }
  }

  tableBody.innerHTML = tableHTML;
}
JavaScript

The code is structured in with three functions.

GetValues()

This function is our entry point. First we grab the inputs and reassign them from strings to integers. We then check to ensure that the inputs are actually integers and if so we are going to generate a list of numbers between the input number values and display them. If one of the inputs is not an integer let the user know they must enter numbers only.

GenerateNumbers()

To generate the numbers we loop through all the numbers from the starting value to the ending value and push each one into an array. When the loop has finished running, we return the array that we created.

DisplayNumbers()

Once we have our numbers we pass that array into a display function. We loop throught he array and use the modulo operator on each value to check if its even or odd and then assign an appropriate class for css styling. We then check if the current value should be on the current row of the table or if a new row should be started. In this case we are keeping the table 5 columns wide. Now all we need to do is use a template literal to build the cell datas html using the correct css class and value. This is then appended onto the end of the exitisting tableHTML string, and the loop runs again till we finish building the table string. To show it on the screen we set the innerHtml of our results div to our completed tableHTML string.