How to use javascript to replace true/false value in html table with a checkbox

Question

I have an array of javascript objects, that I'm using to dynamically populate an html table. I iterate through each object and all is good. However, one of the keys has a value of true/false, and I need to replace the value with a checkbox for each object in the array. How can I do that?

The checkbox needs to be ticked for false and not ticked for true, also the checkboxes need to be disabled, as we don't want a user interaction.

// Draw table from 'products' array of objects 
function drawTable(tbody) {
  var tr, td;
  tbody = document.getElementById(tbody);
  for (var i = 0; i < products.length; i++) // loop through data source
  {
    tr = tbody.insertRow(tbody.rows.length);
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = products[i].ProductName;
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = products[i].UnitsInStock;
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = products[i].UnitPrice;
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = products[i].Discontinued;
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = document.createElement('button');
  }
}

drawTable('table-data')

<h2>Products</h2>

<div class="table-wrapper">
  <table id="display-table" class="fl-table">
    <thead>
      <tr>
        <th>Product Name</th>
        <th>Units In Stock</th>
        <th>Unit Price</th>
        <th>Discontinued</th>
      </tr>
    </thead>
    <tbody id="table-data">

    </tbody>
  </table>
</div>

Chris Bartow · Accepted Answer · 2019-08-19 00:07:21Z

1

Here is how to add a checkbox column based off a field called 'checkbox' that is in your array and is true/false. I'm just matching your code here so it's easy to follow:

    td = tr.insertCell(tr.cells.length);
    checkbox = document.createElement('input');
    checkbox.setAttribute("type", "checkbox");
    checkbox.disabled = true;
    checkbox.checked = products[i].checkbox;
    td.appendChild(checkbox);

answered Aug 19, 2019 at 0:07

Chris Bartow

15.2k11 gold badges45 silver badges47 bronze badges

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

1 Comment

Tsvetan Stoykov Over a year ago

This worked out great, thanks! The only thing that I changed though is to replace products[i].checkbox; with products[i].Discontinued;

Max Rohrer · Accepted Answer · 2019-08-18 23:41:07Z

0

You can use innerHTML. If the value is true display <input type="checkbox" checked /> otherwise if it is false remove "checked" from the tag.

You also may want to attach an onclick function if the checkbox will be clickable so that the value updates.

answered Aug 18, 2019 at 23:41

Max Rohrer

1391 gold badge1 silver badge7 bronze badges

Comments

mullac · Accepted Answer · 2019-08-19 03:08:56Z

What you need to do is check what the value of Discontinued for each product like so:

if(products[i].Discontinued = true) {
  td.innerHTML = "<input type='checkbox' checked />";
} else {
  td.innerHTML = "<input type='checkbox' />";
}

This will create a checkbox no matter what, and tick it if Discontinued is true. You can check the snippet below to see it in action.

// Draw table from 'products' array of objects 
function drawTable(tbody) {
  var tr, td;
  var product = new Product("Product 1", 2, 10, true);
  var products = [new Product("Product 1", 2, 10, true), new Product("Product 2", 30, 50, false)];
  tbody = document.getElementById(tbody);
  for (var i = 0; i < products.length; i++) // loop through data source
  {
    tr = tbody.insertRow(tbody.rows.length);
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = products[i].ProductName;
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = products[i].UnitsInStock;
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = products[i].UnitPrice;
    td = tr.insertCell(tr.cells.length);
    if (products[i].Discontinued = true) {
      td.innerHTML = "<input type='checkbox' checked />";
    } else {
      td.innerHTML = "<input type='checkbox' />";
    }

    td = tr.insertCell(tr.cells.length);
    td.innerHTML = document.createElement('button');
  }
}

drawTable('table-data')

function Product(name, stock, price, discontinued) {
  this.ProductName = name;
  this.UnitsInStock = stock;
  this.UnitPrice = price;
  this.Discontinued = discontinued;
}

<h2>Products</h2>

<div class="table-wrapper">
  <table id="display-table" class="fl-table">
    <thead>
      <tr>
        <th>Product Name</th>
        <th>Units In Stock</th>
        <th>Unit Price</th>
        <th>Discontinued</th>
      </tr>
    </thead>
    <tbody id="table-data">

    </tbody>
  </table>
</div>

Note: I added some code to create two products for this example, don't include it in your project.

Thanks! I tested out your solution and it did added the checkboxes, however all of them were checked, regardless of the true/false value.

Collectives™ on Stack Overflow

How to use javascript to replace true/false value in html table with a checkbox

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related