目次
追加した明細を削除する
前回で明細を追加しましたが、次はその明細を削除してPOSTする手順を記述していきます。
フロー
- 各明細行の削除ボタンを押下
- 該当明細行を非表示にする
- 削除フラグを立てる
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
]);
}
public function posttest(Request $request) {
// リクエストデータをダンプ
dd($request->all());
}
}Blade
<!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="{{ route('posttest') }}" method="POST">
@csrf
<table border="1" style="border-collapse: collapse;" id="table">
<tbody>
@foreach ($dataList as $key => $data)
<tr>
<td>
{{$data['id']}}
<input type="hidden" name="id[]" value="{{$data['id']}}"> {{-- 追加 --}}
</td>
<td>
商品名
<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>
<td>
{{-- 削除ボタン押下時、引数として該当要素をdeleteRowに渡す --}}
<button type="button" onclick="deleteRow($(this))">削除</button> {{-- 追加 --}}
<input type="hidden" name="del_flg[]" value=""> {{-- 追加 --}}
</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<td colspan="3" style="text-align: end;">
<button type="button" onclick="addRow()">行を追加</button>
<input type="submit" value="送信">
</td>
<td></td>
</tr>
</tfoot>
</table>
</form>
{{-- テンプレート --}}
<table border="1" style="border-collapse: collapse; display: none;" id="tableTpl">
<tbody>
<tr>
<input type="hidden" name="id[]" value=""> {{-- 追加 --}}
<td>
1
</td>
<td>
商品名
<input type="text" name="name[]" value="" data-meisaikey="">
</td>
<td>
金額
<input type="text" name="price[]" value="" inputmode="numeric">
</td>
<td>
<button type="button" onclick="deleteRow($(this))">削除</button> {{-- 追加 --}}
<input type="hidden" name="del_flg[]" value=""> {{-- 追加 --}}
</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('input[name="id[]"]').val(max_key); // 一意になるidを追加
new_data.find('td:eq(1) input:eq(0)').attr('data-meisaikey', max_key);
// テーブルの最終行にくっつける
$('#table').find('tbody').append(new_data);
}
// 削除ボタン押下時 -追加--------------------------------
function deleteRow(button) {
// 親要素を取得
tr = button.closest('tr');
// 削除フラグ追加
tr.find('td:eq(3) input[name="del_flg[]"]').val(1);
// 該当明細行を非表示（削除フラグを送るため非表示にするだけ）
tr.hide();
}
// ----------------------------------------------------
</script>
</html>
