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.

Your snippet shows an error: SyntaxError: expected expression, got '}' — node_modules
– node_modules, Commented Aug 17, 2017 at 8:08
You have an extra }); at the end that doesn't match anything. — Barmar
– Barmar, Commented Aug 17, 2017 at 8:10
hmm.. dont know why T_T i use that for making the html table bro did i need post the code before creating the table 1st? — Rob Sutan
– Rob Sutan, Commented Aug 17, 2017 at 8:11
var cells = row.join(",").split(","); why not just var cells = row? — Barmar
– Barmar, Commented Aug 17, 2017 at 8:13

Tran Audi · Accepted Answer · 2017-08-17 09:36:49Z

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

edited Aug 17, 2017 at 9:36

answered Aug 17, 2017 at 8:19

Tran Audi

6071 gold badge8 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Rob Sutan Over a year ago

btw.. when i need to make th in there how to do it?

Tran Audi Over a year ago

Want to add a header row at the first line of the table?

dork Over a year ago

@RobSutan check out my answer for your question.

Rob Sutan Over a year ago

@TranAudi yeah.. i want add a thead in there

Tran Audi Over a year ago

Ok, Have you determined the number of columns? Will the title be hard fix or is it also genarate from data?

|

dork · Accepted Answer · 2017-08-18 02:48:32Z

0

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>

edited Aug 18, 2017 at 2:48

answered Aug 17, 2017 at 9:00

dork

4,6083 gold badges34 silver badges60 bronze badges

5 Comments

Rob Sutan Over a year ago

your code not working in my method. because the data need to know the parse of array that i have in my function before the code for create the table

dork Over a year ago

Sorry, I don't understand. Can you give a sample data?

Rob Sutan Over a year ago

i dont have a sample data. because the data is from csv file. you can look from my question code. from that. i have a function that for creating a table. nah from that function that have been answered by @Tran Audi i need to create a thead before table+=cells[j]

dork Over a year ago

Updated my answer.

Rob Sutan Over a year ago

thx for your answer bro. Tran Audi has give me the answer. and it work

Collectives™ on Stack Overflow

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

2 Answers 2

11 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related