动态表单编辑页面:Laravel 5.2

Question

这不是一个大问题，我相信你们都有一个解决这个问题的想法。 请帮忙。

问题是我有动态表单，我可以将其保存到数据库中并在每行的编辑页面中再次调用它，它对我来说工作正常，但是，idk 如何将新行再次添加到 DB 中，导致我使用的变量无法计算行数。看看这个兄弟

这是我的表视图

<tbody>
              <?php foreach($rows as $value): ?>
              <tr>
                <td><textarea class="form-control" rows="3" name="analisa[]" placeholder="Analisa Penyebab" style="resize: none;
                height: 50px">{{$value->analisa}}</textarea></td>
                <td><textarea class="form-control" rows="3" name="tindakan[]" placeholder="Tindakan Perbaikan dan Pencegahan" 
                style="resize: none; height: 50px">{{$value->tindakan}}</textarea></td>
                <td><input class="form-control" type="text" name="pic[] placeholder="PIC" value="{{$value->pic}}"></td>
                <td><input class="form-control" type="date" name="tanggal_pelaksanaan[]" class="picker__table" value="{{$value->tanggal_pelaksanaan}}"></td>
              </tr>
              <?php endforeach?>
            </tbody>
          </table>
<a class="button" href="#" role="button" id="add">&nbspTambah Analisa</a><br><br>

现在看看我的Javascript

$(document).ready(function(){
    var i = count($rows);
    $('#add').click(function(){
        $('#tbanalisa tbody').append("<tr>"+"<td>"+i+"</td>"+"<td><textarea class="form-control" rows="3" name="analisa[]"+"" placeholder="Analisa Penyebab" style="resize: none; height: 50px"></textarea></td>"+"<td><textarea class="form-control" rows="3" name="tindakan[]"+"" placeholder="Tindakan Perbaikan dan Pencegahan"style="resize: none; height: 50px"></textarea></td>"+"<td><input class="form-control" type="text" name="pic[]"+"" placeholder="PIC"></td>"+"<td><input class="form-control" type="date" name="tanggal_pelaksanaan[]"+""></td>"+"</tr>");
    i++; 
    });
});

想象一下我已经有 2 行，现在如果我更改 var i = 3; 它工作正常，现在它如何自动计算我已经有多少行？

Answer 1

你应该将你的计数存储在一个元素中(使用 php(，以便你可以在客户端浏览器中使用 jquery 访问这个值，例如：

<tbody data-row-count="<?=count($rows); ?>">

不必是 tbody 元素 我只是将其用作示例

现在，在您的 jquery 中，您可以获取当前行数并在单击时再次设置它：

$(document).ready(function(){
    var i = $(tbody).data('row-count');
    $('#add').click(function(){
        $('#tbanalisa tbody').append("<tr>"+"<td>"+i+"</td>"+"<td><textarea class="form-control" rows="3" name="analisa[]"+"" placeholder="Analisa Penyebab" style="resize: none; height: 50px"></textarea></td>"+"<td><textarea class="form-control" rows="3" name="tindakan[]"+"" placeholder="Tindakan Perbaikan dan Pencegahan"style="resize: none; height: 50px"></textarea></td>"+"<td><input class="form-control" type="text" name="pic[]"+"" placeholder="PIC"></td>"+"<td><input class="form-control" type="date" name="tanggal_pelaksanaan[]"+""></td>"+"</tr>");
    i++;
    $(tbody).data('row-count', i);
    });
});

最好在计数器元素中添加一个 ID，这样它在 html 中有一个唯一的标识符，并且可以通过 ID 在 jQuery 中访问。所以在你的元素中添加id=RowCounter然后在jQuery中你可以使用$('#RowCounter')

Answer 2