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

Question

上图是我想获得的一个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的选中状态（选择的是哪行）？
谢谢！

Answer 1

你可以在每一行的第一个中添加一个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()函数。