我正在使用Codeigniter。我生成了一个视图,该视图包含一个具有<tr>
的表单中的表,如下所示:
<tr>
<td><input name="set[2][order]" value="3">
<input type="hidden" name="set[2][ex_id]" value="1"></td>
<td><input name="set[2][weight]" value="60.00"></td>
<td><input name="set[2][reps]" value="5"></td>
<td><img class="deleteRowButton" src="/assets/images/icons/png/delete-3x.png" border="0" alt="Delete Set" title="Toggle Delete Set"/></td>
</tr>
我有一个小jQuery脚本,当点击img"delete-3x.png"时,它可以切换<tr>
的类:
<script>
$('.deleteRowButton').click (function() {
$(this).parents("tr").toggleClass( "deleteSet" );
});
</script>
看起来是这样的:
<tr class="deleteSet">
到目前为止,所有这些都是改变<tr>
的不透明度,所以我让它看起来变灰,只是为了表示它已经被选中删除。
当用户提交表单并且不确定如何在CI中处理时,我想实现的是,用简单的英语代码,说:
if tr class = "deleteSet", then delete from db
目前,所有输入都只是写入数据库。所以我需要一种方法来识别用户想要删除一个条目。
- 在控制器中编写一个按id删除项的函数
Html:
<table>
<tr>
<td><input name="set[2][order]" value="3">
<input type="hidden" name="set[2][ex_id]" value="1"></td>
<td><input name="set[2][weight]" value="60.00"></td>
<td><input name="set[2][reps]" value="5"></td>
<td><img class="deleteRowButton" url="/your-controller-name/method-name/item-id" src="/assets/images/icons/png/delete-3x.png" border="0" alt="Delete Set" title="Toggle Delete Set"/></td>
</tr>
</table>
Js:
$('.deleteRowButton').off('click').on('click',function(){
var _this = $(this);
var url = $(_this).attr('url');
$.post(url,function(data){
$(_this).parents('tr').remove();
});
});
您需要不同的逻辑,您的后端永远不会知道HTML类。它只能知道POST/GET参数。
我推荐的是:
-
用户单击当前行项目上的DeleteSet按钮。
-
Javascript将该行项目ID添加到某个位置(内存中或作为HTML隐藏属性)
-
当您按下"保存"按钮时,它会发送您想要删除的ID列表。
Psudo示例
HTML
<tr>
<td><input name="set[2][order]" value="3"> <input class="set-id" type="hidden" name="set[2][ex_id]" value="1"></td>
<td><input name="set[2][weight]" value="60.00"></td>
<td><input name="set[2][reps]" value="5"></td>
<td><img class="deleteRowButton" src="/assets/images/icons/png/delete-3x.png" border="0" alt="Delete Set" title="Toggle Delete Set"/></td>
</tr>
JS-
$('.deleteRowButton').click (function() {
$(this).disable(); // Don't want to duplicate ids
var id = $('.set-id', $(this).closest('tr')).val();
$('.submit-form').append('<input type="hidden" name="delete[]" value="' + id + '" />');
// Now when form will be submitted it will be populated with item ids you want to delete
});