首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我需要一个带有复选框保存按钮上的bootstrap表代码,它需要返回选中的复选框行

以下是一个带有复选框和保存按钮的Bootstrap表格代码示例:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Table with Checkboxes</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Bootstrap Table with Checkboxes</h1>
        <table class="table">
            <thead>
                <tr>
                    <th></th>
                    <th>行号</th>
                    <th>数据</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>1</td>
                    <td>数据1</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>2</td>
                    <td>数据2</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>3</td>
                    <td>数据3</td>
                </tr>
            </tbody>
        </table>
        <button class="btn btn-primary" onclick="saveSelection()">保存</button>
    </div>

    <script>
        function saveSelection() {
            var selectedRows = [];
            var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
            checkboxes.forEach(function(checkbox) {
                var row = checkbox.parentNode.parentNode;
                var rowData = {
                    rowNumber: row.cells[1].textContent,
                    data: row.cells[2].textContent
                };
                selectedRows.push(rowData);
            });
            console.log(selectedRows);
            // 在这里可以进行保存选中行的操作,例如发送到服务器或进行其他处理
        }
    </script>
</body>
</html>

这段代码创建了一个带有复选框和保存按钮的Bootstrap表格。用户可以通过勾选复选框来选择行,然后点击保存按钮将选中的行保存起来。保存操作通过JavaScript函数saveSelection()实现。

saveSelection()函数中,首先获取所有被选中的复选框元素,然后遍历每个被选中的复选框,找到其所在的行,并提取行号和数据。最后,将提取的行数据存储在selectedRows数组中。你可以根据需要修改保存选中行的操作,例如将数据发送到服务器或进行其他处理。

请注意,这只是一个简单的示例代码,你可以根据自己的需求进行修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券