jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">
                <h2>{{ $modal }}</h2>
            </div>
            <div class="modal-footer">
                <button type="button" class="rem-mod btn btn-secondary" data-dismiss="modal">Zatvori</button>
                <button type="button" class="bck-mod test btn btn-danger" data-dismiss="modal">Obriši korisnika</button>
            </div>
        </div>
    </div>
</div>
<!-- users and search bar -->
<div class="container">
    <div class="panel panel-default">
    <div class="panel-heading">Pretraži korisnike</div>
        <div class="panel-body">
            <div class="form-group">
                <input type="text" name="search" id="search" class="form-control" placeholder="Pretraži korisnike" />
            </div>
            <div class="table-responsive">
                <h3 align="center">Broj korisnika: <span id="total_records"></span></h3>
                <table id="users" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Prezime</th>
                            <th>Ime</th>
                            <th>Telefon</th>
                            <th>Rola</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                <tbody>

                </tbody>
                </table>
            </div>
        </div>    
    </div>
</div>

JavaScript

$(document).ready(function(){
				var tr, td1, td2, td3, td4, td5, cb, btn;

        for(var i = 0; i < 3; i++){
					tr = $('<tr>').addClass('row' + i);;
          td1 = $('<td>').text('First name' + i);
          td2 = $('<td>').text('Last name' + i);
          td3 = $('<td>').text(i +'-' + i);
          cb = $('<select name="role"><option value="role1">Role1</option><option value="role2">Role2</option></select>');
          td4 = $('<td>').append(cb);
          td5 = $('<button class="potvrdi-button">Submit</button>')
          tr.append(td1).append(td2).append(td3).append(td4).append(td5);
          $('tbody').append(tr);
        }
        
        

        

        $(document).on('click', '.potvrdi-button', function(e){
            var value = $(this).closest('tr').find('select[name="role"]').val();
          $.ajax({
            url:"{{ route('live_search.action') }}",
            method:"GET",
            data:{value:value},
            dataType:'json',
            success:function(data)
            {
              $('tbody').html(data.table_data);
              $('#total_records').text(data.total_data);
            }
          })
            
        })

        $(document).on('keyup', '#search', function(){
            var query = $(this).val();
            fetch_user_data(query);
        });
        
        $('#users').on('click', '.remove-button', function(){
            var id = $(this).data('id');
            $(".test").attr('data-id', id);
            $("#deleteModal").modal("show");
        });

        $(document).on('click', '.bck-mod', function(){
            var id = $(this).data('id');
            $.ajax({
                //url:"{{ route('live_search.destroy') }}",
                url:"/live_search/destroy",
                method:"get",
                data:{id:id},
                dataType:'json',
                success:function(data)
                {
                    $('tbody').html(data.table_data);
                   ...