Laravel控制器传值至Blade，jQuery新增行时动态累加数值

你的核心需求是将Laravel控制器的$serialNumberUnits变量传递到Blade视图，并在jQuery新增表格行时，实现该变量与客户端行计数rowCount的数值相加，最终赋值给输入框的value属性。原代码的问题在于：Blade模板语法（服务器端渲染）与JS变量（客户端执行）直接混合，导致rowCount被当作字符串拼接，而非数值计算。

修正步骤与代码示例 #

1. 控制器代码优化（可选但推荐） #

原控制器代码未处理表为空的边界情况，若product_unit_prices表无数据，first()会返回null导致报错，建议补充判断：

$latestUnitPrice = DB::table('product_unit_prices')->latest('id')->first();
// 表为空时默认从1开始计数
$serialNumberUnits = $latestUnitPrice ? $latestUnitPrice->id + 1 : 1;
return view('admin.addProduct', compact('serialNumberUnits'));

2. Blade视图JS代码修正 #

先将服务器端的$serialNumberUnits传递给客户端JS变量，再在点击事件中完成数值计算：

<script>
// 把Laravel变量赋值给全局JS变量，供后续计算使用
const serialNumberUnits = {{ $serialNumberUnits }};

$('#add4').click(function(){
  var rowCount = $('#table_field4 .trr').length + 1;
  // 执行数值相加计算
  const inputValue = serialNumberUnits + rowCount;
  // 用模板字符串拼接HTML，插入计算后的value
  var html = `<tr><td><input type="text" value="${inputValue}"></td></tr>`;
  $('#table_field5').append(html);
});
</script>

关键说明 #

• 执行时机差异：Blade模板在服务器端解析完成后才会发送到客户端，因此无法直接在Blade语法中引用客户端的JS变量rowCount，必须先将服务器端变量传递到JS环境中。
• 数值计算：通过const inputValue = serialNumberUnits + rowCount完成纯客户端数值相加，避免了字符串拼接的错误。

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