滑動刪除按鈕 FOR GRIDVIEW

by wllai2001

HTML

<!---->
<table>
        <tr>
            <td>Title 1</td>
            <td>Title 2</td>
        </tr>
        <tr>
            <td>Row 1, Col 1</td>
            <td>Row 1, Col 2</td>
        </tr>
        <tr>
            <td>Row 2, Col 1</td>
            <td>Row 2, Col 2</td>
        </tr>
    </table>

CSS

table {
    border-collapse: collapse;
}

td {
    border: 1px solid #ddd;
    padding: 8px;
    position: relative;
}

.delete-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
}

td:hover .delete-overlay {
    opacity: 1;
    cursor: pointer;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    var rows = document.querySelectorAll('table tr');

    for (var i = 1; i < rows.length; i++) {  // 跳过第一列（表头）
        var cell = rows[i].querySelector('td:first-child');  // 每行的第一个TD
        var overlay = document.createElement('div');
        overlay.className = 'delete-overlay';
        overlay.innerText = '刪除';

        overlay.addEventListener('click', function() {
            if (confirm('確定要刪除這個項目嗎？')) {
                this.parentNode.parentNode.removeChild(this.parentNode);
            }
        });

        cell.appendChild(overlay);
    }
});