Rob Sutan Rob Sutan - 1 year ago 81
Javascript Question

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

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 Source

I just added a little, You try:

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 += "<td><input type='checkbox' name='mycheckox'></td>"
        table += "</tr>";
      }
      table += "</table>";
      $("#parsed_csv_list").html(table);
    }
    });
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download