How to add checkboxes dynamically to the table in javascript

Question

I have a problem in how to add checkboxes dynamically to the javascript code. I have different scenario. I am getting data through ajax So I need to add table thead in the javascript rather than the html. But now I want to add Checkboxes to my thead. Indeed I added them but I don't know how to check them all with one checkbox. I write also code for that to select all but thats only working when my thead is in the html. Below is my code and it will give you a clear view. Try to read it in the editor because its a more compicated :)

//Javascript

$(document).ready(function() {

  $(document).ready(function() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
  });

  $('select[name="class_id"]').on('change', function() {
    var classID = $(this).val();
    if (classID) {

      $.ajax({

        url: '/attendance/ajax/' + classID,
        type: "GET",
        dataType: "json",
        success: function(data) {

          var markup = '';
          markup += '<tr><th style="width: 2%" class="align-middle text-center"><input type="checkbox" id="options"></th><th style="width: 2%" class="align-middle text-center">#</th> <th style="width: 15%" class="text-center">Student ID<input type="text" class="form-control" disabled></th> <th style="width: 15%" class="text-center">Student Name<input type="text" class="form-control" disabled></th> <th style="width: 15%" class="text-center">Attendance<input type="text" class="form-control" disabled></th> <th style="width: 15%" class="text-center">Date<input type="text" class="form-control" disabled></th> <th style="width: 15%;" class="align-middle text-center">Actions</th> <tr>';

          $.each(data, function(key, value) {

            markup += '<tr> <td><input class="checkBoxes" type="checkbox" name="checkBoxArray[]"></td> <td><input type="hidden" value="' + value.id + '" name="id[]">' + value.id + '</td> <td><input type="hidden" value="' + value.student_id + '" name="student_id[]">' + value.student_id + '</td> <td><input type="hidden" value="' + value.first_name + '" name="first_name[]"><input type="hidden" value="' + value.last_name + '" name="last_name[]">' + value.first_name + ' ' + value.last_name + '<td><input type="hidden" value="' + value.attendance + '" name="attendance[]">' + value.attendance + '</td>' + '<td><input type="hidden" value="' + value.created_at + '" name="created_at[]">' + value.created_at + '</td>' + '<td style=" width=12%" class="text-center"> <a><button title="Edit" class="btn btn-outline-primary"><span class="fas fa-pencil-alt"></span></button></a> </td>' + '</td> <tr>';

          });
          $('table[id="studentsData"]').html(markup);
        }
      });
    }
  });
});

//For selecting all checkboxes

$(document).ready(function() {

  $('#options').click(function() {

    if (this.checked) {
      $('.checkBoxes').each(function() {
        this.checked = true;
      });
    } else {
      $('.checkBoxes').each(function() {
        this.checked = false;
      });
    }

  });

});

score 1 · Accepted Answer · answered Apr 06 '19 at 10:28

1

The issue is the execution of event handlers on DOM elements. The browser renders and executes code from top to bottom (in most cases). This means that you execute $('#options').click() before you add all checkboxes via Ajax request. Therefore you are trying to attach an event handler to elements which are not present at that moment of time. To make it work, you have to add an event listener to the parent element

$('table[id="studentsData"]').on('click', '#options', function() {})

Source: http://api.jquery.com/on/

The second argument is a selector you are going to target

answered Apr 06 '19 at 10:28

marcobiedermann

4,317
3
24
37

But let me clear one thing more. I have also something like for searching in the table. But now my table thead is in javscrpit so it also cannot work. What i can do for that ? Tell me if you wanna see some code – Hasnain Kahn Apr 06 '19 at 17:09
Could you please open up a new question for this with a short code example and a jsbin / jsfiddle / codepen demo. I know this does not answer your specific question but if you are adding more complexity I would look for a plugin / lib which already does the job. Have a look at the following if that might work for you: DataTables: https://www.datatables.net/ tablesort: http://tristen.ca/tablesort/demo/ List.js: https://listjs.com/docs/ – marcobiedermann Apr 06 '19 at 17:53
Ok I am going to make a new question for that and explain it then i will give you the link for that :) – Hasnain Kahn Apr 06 '19 at 18:35
https://stackoverflow.com/questions/55557371/how-to-make-seach-work-in-javascipt-inlaravel – Hasnain Kahn Apr 07 '19 at 09:18
This is the link. Pls check this out – Hasnain Kahn Apr 07 '19 at 09:18

How to add checkboxes dynamically to the table in javascript

1 Answers1