javascript - 动态表单编辑页面 : Laravel 5. 2

Question

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

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

这是我的表格 View

<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') 访问