TOP ▲ itcore TOP ＞ TIPS ＞ jq_row_ope.php 　タグ:javascript php テーブル jquery laravel

テーブルの行を操作する。追加。削除。上下に移動。jQuery | itcore 2021年

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<?php
$btn_row_up = "<button class='btn_fld_up btn btn-sm btn-warning' type=button>上へ</button>";
$btn_row_down = "<button class='btn_fld_down btn btn-sm btn-warning' type=button>下へ</button>";
$btn_row_add = "<button class='btn_fld_add btn btn-sm btn-info' type=button>行追加</button>";
$btn_row_del = "<button class='btn_fld_del btn btn-sm btn-dark' type=button>行削除</button>";
$html_row = "<tr><td>$btn_row_up $btn_row_down $btn_row_add $btn_row_del";
?>

<table>
{!! $html_row !!}
</table>

<script>
$(function(){
  // 上へ
  $(document).on("click", '.btn_fld_up', function(){
    let $row = $(this).closest("tr");
    let $row_prev = $row.prev("tr");
    if($row.prev.length) {
       $row.insertBefore($row_prev);
    }
  });
  // 下へ
  $(document).on("click", '.btn_fld_down', function(){
    let $row = $(this).closest("tr");
    let $row_next = $row.next("tr");
    if($row_next.length) {
      $row.insertAfter($row_next);
    }
  });
  // 行の追加
  $(document).on("click", '.btn_fld_add', function(){
    $(this).parent().parent().after("{!! $html_row !!}");
  });
  // 行の削除
  $(document).on("click", '.btn_fld_del', function(){
    $(this).parent().parent().remove();
  });
});
</script>