bootstrap 传值

聪明的大嘴花

已于 2022-03-04 09:31:51 修改

阅读量927

点赞数

分类专栏： django 文章标签： django

于 2022-03-04 09:31:32 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46248273/article/details/123269180

版权

django 专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了如何在HTML中利用data-属性存储数据，并在JavaScript中通过jQuery的.data()方法来获取这些值。示例展示了在表格中为每个用户姓名添加点击弹窗功能，弹窗内允许用户修改姓名并使用AJAX实现姓名更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用 data- 进行传值，获取该值的时候，使用$("#id名称").data('data-后面的内容')获取值

       <table class="table table-hover table-bordered">
            <tr class="text-center">
                <th class="text-center">数据库中名称</th>
                <th class="text-center">真实姓名</th>
            </tr>
            {% for user in user_list %}
                <tr class="text-center">
                    <td class="text-center">{{ user.accounts_name }}</td>
                    <td class="text-center" data-toggle="modal" data-target="#myModal" data-user="{{ user.accounts_name }}" id="modal">{{ user.real_name }}</td>
                </tr>
            {% endfor %}
        </table>
        <a class="btn btn-default" href="/project/">返回</a>


        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        请输入更换后的姓名：<input type="text" class="form-control" id="change_name">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="changeName()">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    function changeName() {
        var change_name = $("#change_name").val()
        var result = change_name.split(" ").join("")
        var aaa = $("#modal").data('user')
        if (result.length === 0) {
            alert("姓名不能为空")
        } else {
            $.ajax({
                url: "/change_name/",
                type: "post",
                data: {
                    "change_name": result,
                },
                success: function (data) {
                    if (data.code === 200) {
                        window.location.href = "/show_users/"
                    } else {
                        alert(data.msg)
                    }
                }
            })
        }

    }
</script>