how to dynamically add multiple checkboxes to an html table?

Question

I want to dynamically add checkboxes to multiple rows in an html table, without having to add input type ="checkbox" for each . Is this possible? The code snippet for making the table and a function 'check()' to add check boxes is given below...but it does not work. please help.

// Builds the HTML Table out of myList json data.

function buildHtmlTable(myList) {
  var columns = addAllColumnHeaders(myList);

  for (var i = 0; i < myList.length; i++) {
    var row$ = $('<tr/>');
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = myList[i][columns[colIndex]];

      if (cellValue == null) {
        cellValue = "";
      }

      row$.append($('<td/>').html(cellValue));

    }
    
    $("#excelDataTable").append(row$);
  }

}

// Adds a header row to the table and returns the set of columns.

function addAllColumnHeaders(myList) {
  var columnSet = [];
  var headerTr$ = $('<tr/>');
  for (var i = 0; i < myList.length; i++) {
    var rowHash = myList[i];
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append($('<th/>').html(key));
        //check();
      }
      // check();
    }
    //check();
  }
  $("#excelDataTable").append(headerTr$);

  return columnSet;
  check();

}

function check() {
  for (var i = 0; i < myList.length; i++) {
    $('<input />', {
        type: 'checkbox',
        id: 'id' + i,
      })
      .appendTo("#excelDataTable");
  }
}

You are trying to append checkboxes to #excelDataTable (I assume this is a table), that is the problem. You should append them into tds, not table — er-han
– er-han, Commented Jun 28, 2017 at 7:04
What he meant is, replace .appendTo("#excelDataTable"); to .appendTo("td"); — Hema Nandagopal
– Hema Nandagopal, Commented Jun 28, 2017 at 7:35
Can you add an example data of myList? That would help a lot to test the code — er-han
– er-han, Commented Jun 28, 2017 at 8:11

er-han · Accepted Answer · 2017-06-28 09:08:51Z

You can add the checkboxes after the table is created. Below, you can see the updated code. Your table creation works perfect. But you were trying to append the checkboxes to the table itself, not td elements.

In $(document).ready function below, you can see that I create the table first and after that call check() function. It basicly creates a new checkbox for each row, wraps it in a td and put that into the row.

I also added a change event method for the first checkbox to control all the others.

// Builds the HTML Table out of myList json data.

function buildHtmlTable(myList) {
  var columns = addAllColumnHeaders(myList);

  for (var i = 0; i < myList.length; i++) {
    var row$ = $('<tr/>');
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = myList[i][columns[colIndex]];

      if (cellValue == null) {
        cellValue = "";
      }

      row$.append($('<td/>').html(cellValue));

    }

    $("#excelDataTable").append(row$);
  }

}

// Adds a header row to the table and returns the set of columns.

function addAllColumnHeaders(myList) {
  var columnSet = [];
  var headerTr$ = $('<tr/>');
  for (var i = 0; i < myList.length; i++) {
    var rowHash = myList[i];
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append($('<th/>').html(key));
        //check();
      }
      // check();
    }
    //check();
  }
  $("#excelDataTable").append(headerTr$);



  return columnSet;
  //check();

}

function check() {
// foreach row in the table
// we create a new checkbox
// and wrap it with a td element
// then put that td at the beginning of the row

  var $rows = $('#excelDataTable tr');
  for (var i = 0; i < $rows.length; i++) {
    var $checkbox = $('<input />', {
      type: 'checkbox',
      id: 'id' + i,
    });

    $checkbox.wrap('<td></td>').parent().prependTo($rows[i]);
  }
  
  
  // First checkbox changes all the others
  $('#id0').change(function(){
  var isChecked = $(this).is(':checked');
  $('#excelDataTable input[type=checkbox]').prop('checked', isChecked);
  })

}

$(document).ready(function() {

  var myList = [{
    "ASN": "AS9498 BHARTI Airtel Ltd.",
    "COUNTRY": "IN",
    "IP": "182.72.211.158\n"
  }, {
    "ASN": "AS9874 StarHub Broadband",
    "COUNTRY": "SG",
    "IP": "183.90.37.224"
  }, {
    "ASN": "AS45143 SINGTEL MOBILE INTERNET SERVICE PROVIDER Singapore",
    "COUNTRY": "SG",
    "IP": "14.100.132.200"
  }, {
    "ASN": "AS45143 SINGTEL MOBILE INTERNET SERVICE PROVIDER Singapore",
    "COUNTRY": "SG",
    "IP": "14.100.134.235"
  }]


  buildHtmlTable(myList);
  check();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="excelDataTable"></table>

Collectives™ on Stack Overflow

how to dynamically add multiple checkboxes to an html table?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related