如何在 js 文件中使用 foreach 循環？

Question

$(document).ready(function() {
        $("form").on("click", ".addRow", function(){
            var ttr =   '<div class="row add tr">'+
                           '<div class="col">'+
                                '<select class="form-control single purchaseCat" name="category_id[]">'+
                                   '<option value="">Select Category</option>'+
                                   '@foreach($categories as $category)'+
                                   '<option value="{{$category->id}}">{{$category->category_name}}</option>'+
                                   '@endforeach'+
                                '</select>'+
                            '</div>'+    
                         '</div>'
            $('.invoice_table').append(ttr);
        });
    });

我正在使用動態下拉菜單。 如果您檢查圖像，您可以了解問題所在。 當我這次添加新行時，foreach 不起作用

Answer 1

問題很可能是因為@foreach是 Laravel 指令，不會在 .js 文件中執行。

做你需要的簡單方法是使用clone()復制現有行，然后 append() 到需要的 DOM

$(document).ready(function() {
  $("form").on("click", ".addRow", function() {
    let $newRow = $('div.row:first').clone();
    $newRow.find('select.purchaseCat').val(''); // reset selected option to default
    $('.invoice_table').append($newRow);
  });
});

此外，作為問題的旁白，看起來您正在使用div元素創建一個table ，這有點奇怪。 請記住，將table元素用於表格數據是絕對有效和正確的。 它只使用表格進行布局，應該避免。