oldbee0925 2023-01-16 13: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 13: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月24日
  • 已采纳回答 1月16日
  • 创建了问题 1月16日

悬赏问题

  • ¥20 全书网Java爬取数据
  • ¥15 SAP HANA SQL Script 。SUM OVER 怎么加where
  • ¥15 怎么获取红包封面的原始链接,并且获取红包封面序列号
  • ¥100 微信小程序跑脚本授权的问题
  • ¥60 为什么使用python对地震数据进行umap降维后,数据成图会出现不连续的现象
  • ¥100 房产抖音小程序苹果搜不到安卓可以付费悬赏
  • ¥15 STM32串口接收问题
  • ¥15 腾讯IOA系统怎么在文件夹里修改办公网络的连接
  • ¥15 filenotfounderror:文件是存在的,权限也给了,但还一直报错
  • ¥15 安卓qpython向ksweb服务器post文件失败