如何检查表行验证失败的表行数

Question

我在按钮单击事件上动态创建表的行。现在，如果我提交表单并且我的表单字段中有一些错误，我现在可以考虑动态创建总共7行，那么我怎么会知道如何创建了许多总行数。

这就是我动态创建行的方式

 counter=0;
 $('.add-row').click(function(){
    counter=counter+1;
    $("#custom_fields").append("<tr><td><input type=text name='slab_name[]'/><span class='help-inline'>"+slab_name+"</span></td><td><input type='text' name='slab_start[]'/><span class='help-inline'>"+slab_start+"</span></td><td><input type='text' name='slab_end[]'/><span class='help-inline'>"+slab_end+"</span></td><td><input type='text' name='monthly_recurring_cost[]'/><span class='help-inline'>"+mrc+"</span></td><td><input type='text' name='data_in_mbs_slabs[]'/><span class='help-inline'>"+dim+"</span></td><td><input type='text' name='no_of_sms_slabs[]'/><span class='help-inline'>"+nos+"</span></td></tr>");
    alert(counter);
});

这里的计数器正在工作，但在页面刷新显然它显然会显示为零

Answer 1

如果您不希望将行计数器发布到服务器并在页面刷新时获取它，则可以使用LocalStorage而不是普通的JavaScript变量，如下所示：

$('.add-row').click(function(){
   // do your stuff here.
   if (localStorage.counter) {
     localStorage.counter = Number(localStorage.counter) + 1;
   } else {
     localStorage.counter = 1;
   }
}

即使您刷新页面，这也将存储在localStorage中。 localStorage和sessionStorage属性允许在Web浏览器中保存键/值对。此值也可在整个Web浏览器中使用。因此，您甚至可以在刷新页面时访问它。

Answer 2

table包含tbody标签然后像这样使用 $('#tableId tbody tr').length;

或者使用像这样的$('#tableId tr').length;

Answer 3

用jQuery？简单：

$('#custom_fields tr').length

计算“刷新”是没有意义的，除非你已经发布。

对于服务器端验证示例：

    <?php 
       $count = $_POST['count'] ?: 0;
    ?>

    <form id="validator" method="POST"><input type='hidden' value=$count;>
    <button>validate</button>
    </form>
 <script>
 var count = <?=$count?>;
    // ... rest of your code ...
    // and additional JS:
    $('#validator').on('submit', () => {
       $('#validator input').val($('#custom_fields tr').length);
    })
</script>