Laravel+JavaScript行数统计异常：rowCount返回0且仅获首个变量

我用Laravel和JavaScript开发批量提交IP地址的功能，遇到两个问题：

• 使用dd()调试时只能获取到第一个变量的值；
• 执行alert(rowCount)始终返回0，无法读取第一行之后的其他变量。

Blade.php 代码 #

</div>
        <div class="row">
           <div class="col-12 col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
                <h5 class="text-truncate col-10 mt-3"> <span class="fas fa-list-ol icons"></span> <b>Server Description</b></h5>
                <hr class="col-11 col-xs-11 col-sm-11"></hr>
                <div class="tbl_div row col-11 col-xs-11 col-sm-11 ">
                    <div class="row col-2 col-xs-2 col-sm-2 col-md-3">
                        <a href="#" class="p-2" id="addrow"><span class="fas fa-plus"></span> ADD Source / Destination</a>
                    </div>  
                    <table class="table table-hover table-responsive table-fw-widget " id="tblItems" >
                        <thead class="">
                            <td class="col-md-1  text-center border-0">
                            <td class="col-md-3 col-3 col-xs-3 col-sm-3 border-0">Source Servername</td>
                            <td class="col-md-3 col-3 col-xs-3 col-sm-3 border-0">IP address</td>
                            <td class="col-md-3 col-3 col-xs-3 col-sm-3 border-0">Destination Servername</td>
                            <td class="col-md-3 col-3 col-xs-3 col-sm-3 border-0">IP address</td>
                        </thead>
                        <tbody>
                            <!-- @foreach(old('source_name', ['value']) as $fw_ip) -->
                                <tr>
                                    <td class="col-md-1 text-center">
                                    <label class="form-label" id="row_no"><b>#1</b></label></td>
                                    <td class="col-md-3">
                                        <!-- <label class="form-label">Item</label> -->
                                        <input type="text" name="source_namex[]" class="form-control">
                                    </td>
                                    <td class="col-md-3">
                                        <!-- <label class="form-label">Item</label> -->
                                        <input type="text" class="form-control text-center" name="sourceip[]" maxlength="15" value="{{ old('sourceip.'.$loop->index) }}" placeholder="xxx.xxx.xxx.xxx" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">
                                    </td>
                                    <td class="col-md-3">
                                        <!-- <label class="form-label">Item</label> -->
                                        <input type="text" name="destname[]" class="form-control" value="{{ old('destname.'.$loop->index) }}">
                                    </td>
                                    <td class="col-md-4">
                                        <!-- <label class="form-label">Item</label> -->
                                        <input type="text" class="form-control text-center" name="destip[]" maxlength="15" value="{{ old('destip.'.$loop->index) }}" placeholder="xxx.xxx.xxx.xxx" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">
                                    </td>
                                    <td class="col-md-3">
                                        <center><span class="fas fa-trash-alt fa-lg mt-2 icons removerow"></span></center>
                                    </td>
                                </tr>
                            <!-- @endforeach -->
                            </tbody>
                    </table>
                </div>
                <div class="row">
                    <div class="col-6 col-xs-6 col-sm-6 col-md-3 col-lg-3 col-xl-2 ">
                        <div class="form-group">
                          <button type="submit" class="btn btn-allcard btn-block col-10">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

JavaScript 代码 #

<script type="text/javascript">
  
    var rowCount = $("#tblItems tbody>td").length;
    var rowCount = ;
    alert(rowCount);
    $('.type').change(function()
    {
       
    });
    $('#addrow').click(function()
    {
        rowCount += 1;
        
        $("#tblItems tbody>tr:first").clone(true).insertAfter("#tblItems tbody>tr:last");
        $("#tblItems tbody>tr:last").attr("id", "tr"+rowCount);
        $("#tblItems tbody>tr:last #row_no").text("#"+rowCount);
        $("#tblItems tbody>tr:last #row_no").css('font-weight','bold');
        $("#tblItems tbody>tr:last :input").val("");
       
     
    });
    $('.removerow').click(function()
    {
        var id = $(this).closest('tr').attr('id')
        $('table#tblItems tr#'+id).remove();
        rowCount -=1;
    });


      
</script>

问题1：dd()只能获取首个变量 #

原因 #

• 缺少完整的表单包裹，未添加POST方法和CSRF令牌，导致提交数据不完整；
• 控制器中可能未正确接收数组格式的参数。

修复步骤 #

1. 给表格外层添加表单标签：

<form method="POST" action="{{ route('your.submit.route') }}">
    @csrf
    <!-- 原表格代码 -->
</form>

2. 控制器中直接接收数组参数：

public function store(Request $request)
{
    // 获取所有提交的源IP数组
    $sourceIps = $request->input('sourceip');
    // 获取所有提交的目标IP数组
    $destIps = $request->input('destip');
    // 调试查看完整数组
    dd($sourceIps, $destIps);
}

问题2：rowCount始终返回0 #

原因 #

• 初始化时选择器错误：$("#tblItems tbody>td").length统计的是单元格数量，而非行数；
• 存在语法错误：var rowCount = ;会将变量重置为undefined，alert时自动转为0；
• 手动计数逻辑易出错，删除行后未同步实际行数。

修复步骤 #

修改JavaScript初始化及计数逻辑：

<script type="text/javascript">
    // 正确统计tbody下的行数
    var rowCount = $("#tblItems tbody>tr").length;
    alert(rowCount); // 现在会显示初始行数1

    $('#addrow').click(function() {
        rowCount += 1;
        $("#tblItems tbody>tr:first").clone(true).insertAfter("#tblItems tbody>tr:last");
        $("#tblItems tbody>tr:last").attr("id", "tr"+rowCount);
        // 把row_no的id改为class，避免重复id问题
        $("#tblItems tbody>tr:last .row_no").text("#"+rowCount).css('font-weight','bold');
        $("#tblItems tbody>tr:last :input").val("");
    });

    $('.removerow').click(function() {
        $(this).closest('tr').remove();
        // 重新计算实际行数，避免手动计数偏差
        rowCount = $("#tblItems tbody>tr").length;
    });
</script>

同时修改Blade中的row_no标签，将id="row_no"改为class="row_no"，保证DOM元素id唯一。

内容的提问来源于stack exchange，提问作者Teris2