PHP・LaravelとjQueryで明細を追加する方法

2023-10-272023-11-09

PHP・LaravelとjQueryで明細をtableに追加

明細を扱うシステムでは画面遷移することなく明細を追加したい時に使える方法です。
今回はLaravelですが、生PHPでも応用できると思います。

フロー

DBから明細データを取得（今回はサンプルデータを作成しています。）
blade内でデータを表示
行を追加ボタンの押下時、tableテンプレートをjqueryでクローンし、tableの最終行に追加

Controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\users;

class BlogController extends Controller
{
    public function gettest(Request $request) {
        //  サンプルデータ
        $dataList = Array(
            array(
                'id' => 1,
                'name' => 'りんご',
                'price' => 150,
            ),
            array(
                'id' => 2,
                'name' => 'ぶどう',
                'price' => 200,
            ),
            array(
                'id' => 3,
                'name' => 'いちご',
                'price' => 250,
            ),
        );

        return view('test', [
            'dataList' => $dataList
        ]);
    }
}

サンプルデータを作成して、bladeに渡す。DBから取得されることを想定して2次元配列にしています。

blade、jQuery

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
    </head>
    <style>
        tbody tr td{
            padding: 5px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <body>
        <h3>テストフォーム</h3>
        <form action="" method="">
            <table border="1" style="border-collapse: collapse;" id="table">
                <tbody>
                    @foreach ($dataList as $key => $data)
                    <tr>
                        <td>
                            {{$data['id']}}
                        </td>
                        <td>
                            商品名
                            {{-- data-meisaikeyを行番号のデータとし、これを使って追加したときの行番号を求めます。--}}
                            <input type="text" name="name[]" value="{{$data['name']}}" data-meisaikey="{{$key+1}}">
                        </td>
                        <td>
                            金額
                            <input type="text" name="price[]" value="{{$data['price']}}" inputmode="numeric">
                        </td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3" style="text-align: end;">
                            <button type="button" onclick="addRow()">行を追加</button>
                            <input type="submit" value="送信">
                        </td>
                    </tr>
                </tfoot>
            </table>
        </form>

        {{-- テンプレート --}}
        <table border="1" style="border-collapse: collapse; display: none;" id="tableTpl">
            <tbody>
                <tr>
                    <td>
                        1
                    </td>
                    <td>
                        商品名
                        <input type="text" name="name[]" value="" data-meisaikey="">
                    </td>
                    <td>
                        金額
                        <input type="text" name="price[]" value="" inputmode="numeric">
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
    <script>
        // 行を追加ボタン押下時
        function addRow() {
            //  テンプレートのテーブル（tr）をクローン
            new_data = $('#tableTpl').find('tbody tr').clone();

            //  行番号を取得（DBから取得した明細がある場合はその最終行の行番号を取得）
            meisai_id = 0;
            if ($('#table').find('tbody tr:last td:eq(1) input:eq(0)').data('meisaikey')) {
                meisai_id = $('#table').find('tbody tr:last td:eq(1) input:eq(0)').data('meisaikey');
            }

            //  行番号に+1してクローンしたテーブル（tr）の行番号テキストとdata-meisaikeyに付与
            max_key = parseInt(meisai_id) + 1;
            new_data.find('td:eq(0)').text(max_key);
            new_data.find('td:eq(1) input:eq(0)').attr('data-meisaikey', max_key);

            //  テーブルの最終行にくっつける
            $('#table').find('tbody').append(new_data);
        }
    </script>
</html>