为表的每一行创建一个挂起按钮

为了为表的每一行创建一个挂起按钮，您可以使用HTML、CSS和JavaScript来实现这个功能。以下是一个简单的示例，展示了如何为表格的每一行添加一个挂起按钮，并在点击时触发相应的操作。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table with Suspend Buttons</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <table id="dataTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <!-- Example rows -->
            <tr>
                <td>1</td>
                <td>Item 1</td>
                <td><button class="suspend-btn">Suspend</button></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Item 2</td>
                <td><button class="suspend-btn">Suspend</button></td>
            </tr>
            <!-- Add more rows as needed -->
        </tbody>
    </table>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

.suspend-btn {
    background-color: #ff6347;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const suspendButtons = document.querySelectorAll('.suspend-btn');

    suspendButtons.forEach(button => {
        button.addEventListener('click', function() {
            const row = button.closest('tr');
            const id = row.cells[0].textContent;
            // Perform the suspend action here, e.g., sending a request to the server
            console.log(`Suspend item with ID: ${id}`);
            // Optionally, update the UI to reflect the suspended state
            row.style.backgroundColor = '#fdd';
        });
    });
});

解释

HTML部分：创建了一个表格，并为每一行添加了一个挂起按钮。
CSS部分：定义了表格和按钮的基本样式，使按钮看起来更美观。
JavaScript部分：为每个挂起按钮添加了点击事件监听器。当按钮被点击时，它会获取所在行的ID，并执行挂起操作（在这个示例中，只是简单地打印ID到控制台，并改变行的背景颜色以表示挂起状态）。