动态表单编辑页面：Laravel 5.2

Question

这不是什么大问题，相信大家都有解决的办法。请帮忙。

问题是我有动态表格，我可以将它保存到数据库中，然后再次将其调用到每一行的编辑页面中，它对我来说工作正常，但是，我知道如何将新行再次添加到我使用的数据库原因变量中无法计算行数。看看这个兄弟

这是我的表格视图

<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

<?php $counter = 0; ?>

你可以使用一个变量说 $counter 并在表的每一行增加它，并从 java 脚本中访问这个变量

$(document).ready(function(){
    var $counter = <?php echo json_encode($counter); ?>;
        $('#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>");

        $counter++;
    });

});