我目前正在进行每小时预测，原始阵列中有168个小时。在成功地将这个大数组划分为14个小数组的同时，我试图弄清楚如何使用加载更多按钮来创建分页系统。感谢任何帮助清理此代码，同时保持它的所有功能。

function renderHourlyWeather(hourly) {
  hourlySection.innerHTML = "";

  const smallArrays = splitHours(hourly, 12);
  //first page
  smallArrays[0].forEach(hour => {
    const hourRowElement = hourRowTemplate.content.cloneNode(true);
    setValue("day", DAY_FORMATTER.format(hour.timestamp), { parent: hourRowElement});
    setValue("time",HOUR_FORMATTER.format(hour.timestamp) , { parent: hourRowElement});
    hourRowElement.querySelector("[data-icon]").src = getIconUrl(hour.iconCode);
    const tempButton = hourRowElement.querySelector("button");
    const tempOnly = hourRowElement.querySelector(".temp-only");
    if (hour.chanceOfPrecip > 0) {
      setValue("temp", hour.temp, { parent: hourRowElement });
      tempButton.classList.remove("hidden");
    } else {
      setValue("temp-no-precip", hour.temp, { parent: hourRowElement });
      tempOnly.classList.remove("hidden");
    }
    setValue("temp", hour.temp, { parent: hourRowElement });
    setValue("precip-percent", hour.chanceOfPrecip, { parent: hourRowElement });
    setValue("fl-temp", hour.feelsLike, { parent: hourRowElement });
    setValue("wind", hour.windSpeed, { parent: hourRowElement});
    setValue("precip-amount", hour.precipAmount, { parent: hourRowElement });
    setValue("humidity", hour.humidity, { parent: hourRowElement });
    setValue("dew-point", hour.dewPoint, { parent: hourRowElement }); 
    hourlySection.append(hourRowElement);
  });
  tableRowInteractive();
  console.log(smallArrays);
  const loadMoreBtn = document.querySelector(".load-more");
  loadMoreBtn.addEventListener("click", () => {

    smallArrays[1].forEach(hour => {
      const hourRowElement = hourRowTemplate.content.cloneNode(true);
      setValue("day", DAY_FORMATTER.format(hour.timestamp), { parent: hourRowElement});
      setValue("time",HOUR_FORMATTER.format(hour.timestamp) , { parent: hourRowElement});
      hourRowElement.querySelector("[data-icon]").src = getIconUrl(hour.iconCode);
      const tempButton = hourRowElement.querySelector("button");
      const tempOnly = hourRowElement.querySelector(".temp-only");
      if (hour.chanceOfPrecip > 0) {
        setValue("temp", hour.temp, { parent: hourRowElement });
        tempButton.classList.remove("hidden");
      } else {
        setValue("temp-no-precip", hour.temp, { parent: hourRowElement });
        tempOnly.classList.remove("hidden");
      }
      setValue("temp", hour.temp, { parent: hourRowElement });
      setValue("precip-percent", hour.chanceOfPrecip, { parent: hourRowElement });
      setValue("fl-temp", hour.feelsLike, { parent: hourRowElement });
      setValue("wind", hour.windSpeed, { parent: hourRowElement});
      setValue("precip-amount", hour.precipAmount, { parent: hourRowElement });
      setValue("humidity", hour.humidity, { parent: hourRowElement });
      setValue("dew-point", hour.dewPoint, { parent: hourRowElement }); 
      hourlySection.append(hourRowElement);
    });
    tableRowInteractive();

    //alert("Loading");
  });

  function tableRowInteractive() {

    const table = document.querySelector('.hour-section');
    for (var i = 0, row; row = table.rows[i]; i++) {
      const group = row.querySelectorAll('.temp-percent');
      const group2 = row.querySelectorAll('.dew-humidity-group-tr');
  
      group.forEach(element => {
        element.addEventListener("click", () => {
              toggleGroup(group[0], group[1])
        });
        const percentage = row.querySelector("[data-precip-percent]").innerHTML;
        if (percentage > 80) {
          element.classList.add("high");
        }
        else if(percentage > 50) {
          element.classList.add("medium");
        } 
        else if(percentage >= 20) {
          element.classList.add("low");
        } 
      })
      
      group2.forEach(element => {
        element.addEventListener("click", () => {
             toggleGroup(group2[0], group2[1])
        }
        );
        
        const label = element.querySelector(".label");
        const dewPointNumber = row.querySelector('[data-dew-point]').innerHTML;
  
        if (dewPointNumber >= 70) {
          label.classList.add("bad"); 
        }
        else if (dewPointNumber > 60) {
          label.classList.add("normal");
        }
        else if (dewPointNumber > 50) {
          label.classList.add("good");
        }
        else if (dewPointNumber < 50) {
          label.classList.add("best");
        }
  
      })
    }
  }

  // split hours into small chunks

  function splitHours(hourArray, chunkSize) {
    const results = [];
    let index = 0;
    while (index < hourArray.length) {
      results.push(hourArray.slice(index, index + chunkSize));
      index += chunkSize;
    }
    return results;
  }  
}