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()函数。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
    oldbee0925 2023-01-16 06:17

    非常感谢!!第一步成功了!我想用checkbox的外观,但是只用到单选的功能,我该怎么做?

    回复
查看更多回答(1条)
编辑
预览

报告相同问题?

问题事件

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

悬赏问题

  • ¥15 mes系统扫码追溯功能
  • ¥40 selenium访问信用中国
  • ¥15 电视大赛投票系统的c语言代码怎么做
  • ¥20 在搭建fabric网络过程中遇到“无法使用新的生命周期”的报错
  • ¥15 Python中关于代码运行报错的问题
  • ¥500 python 的API,有酬谢
  • ¥15 软件冲突问题,软件残留问题
  • ¥30 有没有人会写hLDA,有偿求写,我有一个文档,想通过hLDA得出这个文档的层次主题,有偿有偿!
  • ¥50 有没有人会写hLDA,有偿求写,我有一个文档,想通过hLDA得出这个文档的层次主题,有偿有偿!
  • ¥15 alpha101因子里哪些适合crypto?
手机看
程序员都在用的中文IT技术交流社区

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

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

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

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

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

客服 返回
顶部