[FREE] TableViewer - fully style customized to show table data

TIMAI2 · June 26, 2024, 12:54pm

Tableviewer with Checkboxes

Here is another little helper, if you want to have checkboxes in your table, and get the selections.

Setup your table data, and include a column for the checkboxes.

Use this html to create a checkbox:

<input type="checkbox"/>

or if you want a row to be checked:

<input type="checkbox" checked/>

You can then run a javascript on the table to return the checked status of each checkbox:

function getChx() {
var arr = [];
var chx = document.querySelectorAll('input[type="checkbox"]');
  for (let i = 0; i < chx.length; i++) {
  arr.push(chx[i].checked); 
  }
return JSON.stringify(arr);
}

getChx();

I attach an example aia project, that shows the state of each checkbox when the table is first loaded, and this list is refreshed when any checkbox is changed. You can then use this list to select the checked (or unchecked) items from the underlying list.

AIA
tvChx.aia (28.0 KB)

BLOCKS

SCREEN

This js will return the values of the checked items:

function getChx() {
var tbl = document.getElementById("table1");
var vals = "";
var chx = document.querySelectorAll('input[type="checkbox"]');
for (var i=0;i<chx.length;i++) {
  if (chx[i].checked == true) {
    vals += tbl.rows[i].cells[0].innerText + ", ";
  }
}
return vals.replace(/,\s*$/, "");
}
getChx();