jquery - 可编辑的表，但保存所有值

Question

只是遇到了障碍，我也有一个很大的表格，大多数单元格都是可编辑的，但我想单击提交按钮并保存所有单元格中的所有值。

这是我目前拥有的：

 $(".edit").focusout(function(){
        //$("#sub").click(function() {
            $(this).removeClass("editMode");
            var id = this.id;
            var split_id = id.split("_");
            var field_name = split_id[0];
            var edit_id = split_id[1];
            var value = $(this).text();


            $.ajax({
                url: '/claim/store',
                type: 'post',
                data: { field:field_name, value:value, id:edit_id },
                success:function(response){
                    console.log('Save successfully'); 
                }
            });

        });

哪个有效，但一次只能执行一个单元格，并且对于 ajax 帖子，我需要发送所有内容，以便我可以对其进行编码并保存到数据库。

我有这是一个 Laravel 刀片 foreach：

@foreach($costItems as $key => $cost)
                    <tr>
                        <td>{{ $key }}</td>
                        <td colspan="6">{{ $cost}}</td>
                        <td contentEditable="true" class="edit" id="total_budget_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q1_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q2_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q3_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q4_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q5_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q6_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q7_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q8_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q9_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q10_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q11_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="q12_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="project_total_{{ $key }}"></td>
                        <td contentEditable="true" class="edit" id="variance_{{ $key }}"></td>
    </tr>

任何帮助都非常感谢，以便一次性保存所有已编辑的值。

标签： jqueryajaxlaravel-5