테이블 하이퍼링크 관련문의드려요. 채택완료

다음 코드가 도움이 될지 모르겠습니다.

</p>

<p><style>

.shop_submenu table {width:100%; max-width:600px;margin-top: 15px; border-bottom: 2px solid #575757;}

.shop_submenu table td {width:33%; 

    text-align: center;

    font-size: 1.4em;

    background: #e3e3e3;

    font-weight: 500;

    color: #4d4d4d;

}

.shop_submenu table td:where(:hover,.active) {background:red; color:white;}

</style></p>

<p><div class="shop_submenu">

<table>

    <tr>

        <td onClick="location.href='/shop/list.php?ca_id=10'">주문1</td>

        <td onClick="location.href='/shop/list.php?ca_id=20'">주문2</td>

        <td onClick="location.href='/shop/list.php?ca_id=30'">주문3</td>

    </tr>

</table></p>

<p> </p>

<p><script>

var qs = new URLSearchParams(location.search);

var ca_id = qs.get('ca_id');

if (ca_id != null) {

    document.querySelectorAll('.shop_submenu table td').forEach((el, i) => {

        var param_each = el.getAttribute('onclick').match(/(?<=ca_id=)[^&$']+/);

        if (param_each != null && param_each[0] == ca_id) {

            el.classList.add('active');

        }

    });

}

</script></p>

<p>

아래의 코드를 참고해 보시겠어요?

PHP

<?php
// 현재 페이지의 ca_id를 얻어옴
$current_ca_id = isset($_GET['ca_id']) ? $_GET['ca_id'] : '';

// 버튼에 active 클래스를 추가하기 위한 배열
$button_classes = array(
    '10' => '',
    '20' => '',
    '30' => ''
);

if (array_key_exists($current_ca_id, $button_classes)) {
    $button_classes[$current_ca_id] = 'active';
}
?>
 

HTML CSS

<style>
.shop_submenu table {
    width: 100%;
    max-width: 600px;
    margin-top: 15px;
    border-bottom: 2px solid #575757;
}
.shop_submenu table td {
    width: 33%;
    text-align: center;
    font-size: 1.4em;
    background: #e3e3e3;
    font-weight: 500;
    color: #4d4d4d;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}
.shop_submenu table td:hover {
    background: red;
    color: white;
}
.shop_submenu table td.active {
    background: red;
    color: white;
}
</style>

<div class="shop_submenu">
    <table>
        <tr>
            <td class="<?php echo $button_classes['10']; ?>" onClick="location.href='/shop/list.php?ca_id=10'">주문1</td>
            <td class="<?php echo $button_classes['20']; ?>" onClick="location.href='/shop/list.php?ca_id=20'">주문2</td>
            <td class="<?php echo $button_classes['30']; ?>" onClick="location.href='/shop/list.php?ca_id=30'">주문3</td>
        </tr>
    </table>
</div>