여분필드 값을 비교해서 색상변경하려면 어떻게 하면 되는지요?

</p>

<p><?php

$wr_1 = 10;

$wr_2 = 20;

$wr_3 = 11;

$wr_4 = 2;

$wr_5 = 14;

$numbers = [$wr_1, $wr_2, $wr_3, $wr_4, $wr_5];

$max = array_search(max($numbers), $numbers);

foreach($numbers as $idx => $number) {

    $style = $idx === $max ? ' style="color: red;"' : '';

    echo '<span'.$style.'>'.$number.'</span>
';

}</p>

<p>

</p>

<p>$data1 = $view['wr_1'];

$data2 = $view['wr_2'];

$data3 = $view['wr_3'];

$data4 = $view['wr_4'];</p>

<p>$values = array($data1, $data2, $data3, $data4);

$maxValue = max($values);

$maxIndexes = array_keys($values, $maxValue);</p>

<p>echo "최댓값: " . $maxValue . ", 인덱스: " . implode(", ", $maxIndexes);

</p>

<p><table>

    <tr>

        <td id="cell1"><?php echo $write['wr_1']; ?></td>

        <td id="cell2"><?php echo $write['wr_2']; ?></td>

        <td id="cell3"><?php echo $write['wr_3']; ?></td>

        <td id="cell4"><?php echo $write['wr_4']; ?></td>

        <td id="cell5"><?php echo $write['wr_5']; ?></td>

    </tr>

</table>

 </p>

<p><script>

    function highlightMaxMinCells() {

        const cells = document.querySelectorAll("td[id^='cell']");</p>

<p>        // 초기값 설정

        let maxVal = Number(cells[0].innerText);

        let minVal = Number(cells[0].innerText);

        let maxCell = cells[0];

        let minCell = cells[0];</p>

<p>        // 여분필드 값을 반복하면서 최대값과 최소값을 찾음

        for (let i = 1; i < cells.length; i++) {

            const cellValue = Number(cells[i].innerText);</p>

<p>            if (cellValue > maxVal) {

                maxVal = cellValue;

                maxCell = cells[i];

            }</p>

<p>            if (cellValue < minVal) {

                minVal = cellValue;

                minCell = cells[i];

            }

        }</p>

<p>        // 최대값과 최소값 셀에 색상 적용

        maxCell.style.backgroundColor = "green"; // 또는 다른 색상

        minCell.style.backgroundColor = "red";   // 또는 다른 색상

    }</p>

<p>    // 페이지 로드 시 실행

    window.onload = highlightMaxMinCells;

</script>