<!DOCTYPE html> <html> <head> <title>Laravel Table Inline Editing Example - ItSolutionStuff.com</title> <meta name="csrf-token" content="{{ csrf_token() }}"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/css/jquery-editable.css" rel="stylesheet"/> <script>$.fn.poshytip={defaults:null}</script> <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/js/jquery-editable-poshytip.min.js"></script> </head> <body> <div class="container"> <h1>Laravel Table Inline Editing Example - ItSolutionStuff.com</h1> <table class="table table-bordered data-table"> <thead> <tr> <th>No</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> @foreach($users as $user) <tr> <td>{{ $user->id }}</td> <td> <a href="" class="update" data-name="name" data-type="text" data-pk="{{ $user->id }}" data-title="Enter name">{{ $user->name }}</a> </td> <td> <a href="" class="update" data-name="email" data-type="text" data-pk="{{ $user->id }}" data-title="Enter email">{{ $user->email }}</a> </td> </tr> @endforeach </tbody> </table> </div> </body> <script type="text/javascript"> $.fn.editable.defaults.mode = 'inline'; $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': '{{csrf_token()}}' } }); $('.update').editable({ url: "{{ route('users.update') }}", type: 'text', pk: 1, name: 'name', title: 'Enter name' }); </script> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter