php-coding/18.test3.result.php

<?php
/** @var mysqli $mysqli */
include_once 'config/dbconfig.php';
echo '<style>
    #bookTable {
        border-collapse: collapse;
        width: 80%;
        text-align: center;
        margin: auto;
        font-family: Arial, sans-serif;
    }
    #bookTable th, #bookTable td {
        border: 1px solid black;
        padding: 10px;
    }
    #bookTable th {
        background-color: #f2f2f2;
    }
    #bookTable tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    #bookTable tr:hover {
        background-color: #ddd;
    }
    .editBtn, .deleteBtn, .batDelBtn {
        padding: 5px 10px;
        text-decoration: none;
        font-size: 12px;
        margin: 2px 2px;
        cursor: pointer;
        border: none;
    }
    .editBtn {
        background-color: #4CAF50;
        color: white;
    }
    .deleteBtn {
        background-color: #f44336;
        color: white;
    }
    .batDelBtn {
        background-color: #008CBA;
        color: white;
    }
    #announcement {
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        padding: 10px;
        margin-bottom: 20px;
        font-size: 18px;
        text-align: center;
    }
</style>';
//function removeInvalidCharacters($str)
//{
//    $regex = '/[\x00-\x1F\x80-\xFF]/';
//    return preg_replace($regex, '', $str);
//}

//公告栏
echo '<div id="announcement"><h3>公告</h3>';
$sql = "SELECT title FROM tb_affiche ORDER BY createtime DESC LIMIT 3";
$result = $mysqli->query($sql);
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $title = $row['title'];
        if (mb_strlen($title, 'UTF-8') > 15) {
            $title = mb_substr($title, 0, 15, 'UTF-8') . '...';
        }
        echo '<p>' . $title . '</p>';
    }
} else {
    echo '<p>暂无公告</p>';
}

echo '</div>';


$records_per_page = 10;
$page = isset($_GET['page']) && is_numeric($_GET['page']) ? intval($_GET['page']) : 1;
$offset = ($page - 1) * $records_per_page;

$result = $mysqli->query("select * from tb_demo02 limit $offset, $records_per_page");
echo '<table style="border-collapse: collapse;width: 80%;text-align: center;" id="bookTable">';
echo '<tr style="border: 1px solid black"><td>全选<input type="checkbox" name="batchSelect"></td><th>id</th><th>name</th><th>price</th><th>date</th><th>type</th><th>operation</th><th>operation2</th></tr>';
while ($row = $result->fetch_assoc()) {
    echo '<tr>';
    echo '<td><input type="checkbox" name="id" value="' . $row['id'] . '"></td>';
    echo '<td>' . $row['id'] . '</td>';
    echo '<td>' . $row['bookname'] . '</td>';
    echo '<td>' . $row['price'] . '</td>';
    echo '<td>' . $row['f_time'] . '</td>';
    echo '<td>' . $row['type'] . '</td>';
    echo '<td><button class="editBtn">修改</button></td>';
    echo '<td><button class="deleteBtn">删除</button></td>';
    echo '</tr>';
}
echo '<tr><td><button class="batDelBtn">批量删除</button></td>';
//可切换的页面显示
$result = $mysqli->query('select count(*) as count from tb_demo02');
$row = $result->fetch_assoc();
$total_records = $row['count'];
$total_pages = ceil($total_records / $records_per_page);
echo '<td colspan="7">';
for ($i = 1; $i <= $total_pages; $i++) {
    echo '<a href="18.test3.result.php?page=' . $i . '">' . $i . '</a> ';
}
echo '</td></tr>';
echo '</table>';
$result->free();
echo <<<EOL
<script>
//fix
    const table = document.getElementById('bookTable');
    table.addEventListener('click', function(event) {
        const target = event.target;
        if (target.classList.contains('editBtn')) { // 修改
            const cells = target.parentNode.parentNode.cells;
            for (let i = 1; i < cells.length - 2; i++) {
                const text = cells[i].innerText;
                cells[i].innerText = '';
                const input = document.createElement('input');
                input.type = 'text';
                input.value = text;
                cells[i].appendChild(input);
            }
            target.innerText = '提交';
            target.classList.remove('editBtn');
            target.classList.add('submitBtn');
        } else if (target.classList.contains('submitBtn')) { // 提交
            const cells = target.parentNode.parentNode.cells;
            const data = {
                id: cells[1].childNodes[0].value,
                bookname: cells[2].firstChild.value,
                price: cells[3].firstChild.value,
                f_time: cells[4].firstChild.value,
                type: cells[5].firstChild.value,
                update: true
            };
            fetch('api/18.test3.api.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            }).then(response => response.json())
            .then(data => {
                alert(data.message);
                location.reload();
            });
        }else if (target.classList.contains('deleteBtn')) { // 删除
            const id = target.parentNode.parentNode.cells[1].innerText;
            fetch('api/18.test3.api.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({id: id, delete: true})
            }).then(response => response.json())
            .then(data => {
                alert(data.message);
                location.reload();
            });
        }else if (target.name === 'batchSelect') { // 全选
            const checkboxes = document.getElementsByName('id');
            for (let i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked = target.checked;
            }
        }else if (target.classList.contains('batDelBtn')) { // 批量删除
            const checkboxes = document.getElementsByName('id');
            const ids = [];
            for (let i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].checked) {
                    ids.push(checkboxes[i].value);
                }
            }
            fetch('api/18.test3.api.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({id: ids, batDelete: true})
            }).then(response => response.json())
            .then(data => {
                alert(data.message);
                location.reload();
            });
        }
    });
</script>
EOL;