how to create a checkbox while creating a table with javascript?

Question

i have creating a html table with javascript function in a page. and i need to create a checkbox in each of the last column in each row from my table. i don't know how to do that. anyone can help me? please give me an example for that.

this is my code for creating a table

 $(document).ready(function() { $('#submit-file').on("click", function(e) { if ($('#files').val() == "") { alert("Anda Harus Memasukkan File Terlebih Dahulu"); } else { e.preventDefault(); $('#files').parse({ config: { delimiter: "", skipEmptyLines: false, complete: displayHTMLTable, }, before: function(file, inputElem) { //console.log("Parsing file...", file); }, error: function(err, file) { //console.log("ERROR:", err, file); }, complete: function() { //console.log("Done with all files"); } }); } }); function displayHTMLTable(results) { var table = "<table class='table table-bordered'>"; var data = results.data; var size = -1; for (i = 1; i < data.length; i++) { table += "<tr>"; var row = data[i]; var cells = row.join(",").split(","); if (cells.length < size) continue; else if (cells.length > size) size = cells.length; for (j = 0; j < cells.length; j++) { table += "<td>"; table += cells[j]; table += "</td>"; } table += "</tr>"; } table += "</table>"; $("#parsed_csv_list").html(table); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <div class="container" style="padding:5px 5px; margin-left:5px"> <div class="well" style="width:70%"> <div class="row"> <form class="form-inline"> <div class="form-group"> <label for="files">Upload File Data :</label> <input type="file" id="files" class="form-control" accept=".csv" required /> </div> <div class="form-group"> <button type="submit" id="submit-file" class="btn btn-primary">Upload File</button> <img src="../image/show.png" class="button" name="display_data" id="display_data" style="height:35px; width:40px" /> </div> </form> </div> <div class="row"> <div id="parsed_csv_list" class="panel-body table-responsive" style="width:800px"> </div> </div> </div> <div id="footer"></div> </div> 

i just add all of my code contain the html code and all the javascript code i create the table after i get the data parsed from a csv file. the array that i got from the csv file i made it into a table.

Answer 1

I just added a little, You try:

function displayHTMLTable(results) {
    var table = "<table class='table table-bordered'>";
    var data = results.data;
    var size = -1;
    var header = "<thead><tr>";
    header+= "<th>Column header 1</th>";
    header+= "<th>Column header 2</th>";
    header+= "<th>Column header 3</th>";
    header+= "<th>Column header 4</th>";
    header+= "<th>Column header for checkbox</th>";
    header+= "</tr></thead>";
    table += header;
    table+="<tbody>";
    for (i = 1; i < data.length; i++) {
        table += "<tr>";
        var row = data[i];
        var cells = row.join(",").split(",");
        if (cells.length < size) continue;
        else if (cells.length > size) size = cells.length;
        for (j = 0; j < cells.length; j++) {

            table += "<td>";
            table += cells[j];
            table += "</td>";
        }
        table += "<td><input type='checkbox' name='mycheckox'></td>"
        table += "</tr>";
    }
    table+="</tbody>";
    table += "</table>";
    $("#parsed_csv_list").html(table);
}

Answer 2

function displayHTMLTable(results) {
  const table = document.createElement('table');
  table.className = 'table table-bordered';

  // Add the thead.
  const thead = table.appendChild(document.createElement('thead'));
  const theadRow = thead.appendChild(document.createElement('tr'));

  // Assuming the first row is the line with the headers.
  results.data[0].split(',').forEach((header) => {
    theadRow.appendChild(document.createElement('th')).innerText = header;
  });

  // Add an empty th for the checkbox column.
  theadRow.appendChild(document.createElement('th'));

  // Add the tbody.
  const tbody = table.appendChild(document.createElement('tbody'));

  results.data.forEach((row, i) => {
    if (i === 0) {
      return;
    }

    const tr = tbody.appendChild(document.createElement('tr'));
    const cells = row.split(',');
    cells.forEach((cell) => {
      tr.appendChild(document.createElement('td')).innerText = cell;
    });

    // Add the checkbox here.
    const td = tr.appendChild(document.createElement('td'));
    const chk = td.appendChild(document.createElement('input'));
    chk.type = 'checkbox';
    // Set the value, name, etc. of the checkbox.
    // chk.value = cells[0];
    // chk.name = `chk-${cells[0]}`;
  });

  document.getElementById('parsed_csv_list').appendChild(table);
}

 function displayHTMLTable(results) { const table = document.createElement('table'); table.className = 'table table-bordered'; // Add the thead. const thead = table.appendChild(document.createElement('thead')); const theadRow = thead.appendChild(document.createElement('tr')); // Assuming the first row is the line with the headers. results.data[0].split(',').forEach((header) => { theadRow.appendChild(document.createElement('th')).innerText = header; }); // Add an empty th for the checkbox column. theadRow.appendChild(document.createElement('th')); // Add the tbody. const tbody = table.appendChild(document.createElement('tbody')); results.data.forEach((row, i) => { if (i === 0) { return; } const tr = tbody.appendChild(document.createElement('tr')); const cells = row.split(','); cells.forEach((cell) => { tr.appendChild(document.createElement('td')).innerText = cell; }); // Add the checkbox here. const td = tr.appendChild(document.createElement('td')); const chk = td.appendChild(document.createElement('input')); chk.type = 'checkbox'; // Set the value, name, etc. of the checkbox. // chk.value = cells[0]; // chk.name = `chk-${cells[0]}`; }); document.getElementById('parsed_csv_list').appendChild(table); } const results = { data: [ 'id,name,age', '1,John Doe,25', '2,Jane Doe,20', '3,Mary Jane,30', '4,John Smith,35', ], }; displayHTMLTable(results); 

 * { margin: 0; outline: 0; padding: 0; } html, body { font: normal 14px/1.8 Helvetica, Arial, sans-serif; } table { border-collapse: collapse; margin: 10px 0; table-layout: fixed; } th, td { border: 1px solid #ccc; padding: 5px; } th { background: #ccc; } 

 <div id="parsed_csv_list"></div>