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"); } } 

Answer 1

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>