javascript - 如何在使用javascript创建表格时创建复选框？

Question

我创建了一个 html 表 javascript页面中的函数。我需要创建一个 checkbox在最后的每个 column in each row从我的 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>

我只是添加了我的所有代码包含html code以及所有the javascript code我在获取从 csv 解析的数据后创建表文件。我从 csv 得到的数组文件我把它做成了一个表。

Answer 1

我只是添加了一点，你试试:

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