oldbee0925 2023-01-16 05:33 采纳率: 91.4%
浏览 37
已结题

bootstrap的表格如何添加checkbox同时修改所选行的信息?

img


上图是我想获得的一个bootstrap表格的界面。
每行都有checkbox,选中后,点击上方的“删除”:删除该行
点击“修改”,该行变为可编辑状态;
点击“添加”:增加一个空行。
我尝试使用jq、bootstrap的时间不长,问题提得琐碎了一些,请指教:
1)我的后端是django,我用 HttpResponse的方式给前端提供python的dict数据,前端生成表格的代码如下:

 {% for data in  dict_top_mv_100.data  %}
   <tr>
       <td>{{data.0}}</td>
       <td>{{data.1}}</td>
       <td>{{data.2}}</td>
       <td>{{data.3}}</td>
   </tr>
 {% endfor %}

在什么位置添加代码,让每行都有checkbox?

2)如何确定checkbox的选中状态(选择的是哪行)?
谢谢!

  • 写回答

2条回答 默认 最新

  • m0_54204465 2023-01-16 05:45
    关注

    你可以在每一行的第一个中添加一个checkbox。 例如:

    <td><input type="checkbox" name="selected_rows" value="{{data.id}}"></td>
    
    
    

    你可以在点击删除或修改按钮时使用JQuery来获取选中的checkbox的value值,以确定选中的行. 例如:

    $("#delete_button").click(function(){
        var selected_rows = $("input[name='selected_rows']:checked").map(function(){
            return $(this).val();
        }).get();
        console.log(selected_rows);
    });
    
    

    这里#delete_button是删除按钮的id

    需要注意的是,如果你想要在前端实现删除和修改功能,你需要使用Ajax请求来与后端交互。如果你只是想在前端隐藏选中的行而不是真正删除它们,你可以使用JQuery的hide()函数。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 1月23日
  • 已采纳回答 1月16日
  • 创建了问题 1月16日

悬赏问题

  • ¥15 fluent设置了自动保存后,会有几个时间点不保存
  • ¥20 激光照射到四象线探测器,通过液晶屏显示X、Y值
  • ¥15 这怎么做,怎么在我的思路下改下我这写的不对
  • ¥50 数据库开发问题求解答
  • ¥15 安装anaconda时报错
  • ¥20 如何用Python处理单元格内连续出现的重复词语?
  • ¥15 小程序有个导出到插件方式,我是在分包下引入的插件,这个export的路径对吗,我看官方文档上写的是相对路径
  • ¥20 希望有人能帮我完成这个设计( *ˊᵕˋ)
  • ¥100 将Intptr传入SetHdevmode()将Intptr传入后转换为DEVMODE的值与外部代码不一致
  • ¥50 基于ERA5数据计算VPD
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部