How to select items using a input checkbox?

Question

This is my code snippet, I want to display the difference of two selected columns and create a new table with columns selected and difference along as a column. I am not getting how can I select table columns with the help of checkbox (basically bind the checkbox with table columns). I cant find anything on Stack Overflow or any other site for the reference.

Edit: I have added the JS code for getting the column data corresponding to that particular header, right now I am hard coding it to header "Three". How can I pick the particular column data bind to the input checkbox clicked?

columnTh = $("table th:contains('Three')"); 
        columnIndex = columnTh.index() + 1; 
        let arr = [];
        alert(columnIndex)
      arr =  $('table tr td:nth-child(' + columnIndex + ')').text()
      
        alert(arr)

table {
  border: 1px solid white;
  text-align: center;
  padding: 6px;
  background: #e1edf9;
}

td {
  border: 1px solid white;
  text-align: center;
  padding: 6px;
}

td:first-child,
tr:first-child {
  background-color: #003a6a !important;
  color: white !important;
}

.table-scroll {
  position: relative;
  width: 100%;
  z-index: 1;
  margin: auto;
  overflow: auto;
}

.table-scroll table {
  width: 100%;
  min-width: 1280px;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.table-wrap {
  position: relative;
}

.table-scroll tr:first-child {
  background: #333;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ccc;
}

.table-scroll tfoot tr {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: #666;
  color: #fff;
  z-index: 4;
}

tr:first-child {
  z-index: 5;
}

@media screen and (max-width: 500px) {
  td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #ccc;
    max-width: 140px;
  }
}

vanowm · Accepted Answer

I don't know how you want to display the difference, but this might get you started:

const table = document.getElementById("main-table"),
      checkboxes = table.querySelectorAll('th > input[type="checkbox"]');

let columns = {};
for(let i = 0; i < checkboxes.length; i++)
{
  checkboxes[i].addEventListener("input", onInput);
}

function onInput(e)
{
  const input = e.target,
        column = input.parentNode.cellIndex,
        tds = table.querySelectorAll('td:nth-child(' + (column + 1) + ')');

  if (input.checked)
  {
    let list = [];
    for(let i = 0; i < tds.length; i++)
    {
      list[list.length] = tds[i].textContent;
    }
    columns[column] = list;
  }
  else
  {
    delete columns[column];
  }
  if (Object.keys(columns).length > 1)
    showDifference();
  else
    table.classList.remove("result");
}

function showDifference()
{
  table.classList.add("result");
  let cells = table.getElementsByClassName("result"),
      trs = table.querySelectorAll("tr");

  if (!cells.length)
  {
    cells = [];
    for(let i = 0, cell; i < trs.length; i++)
    {
      cell = document.createElement(i ? "td" : "th");
      if (!i)
        cell.textContent = "Results";

      cell.className = "result";
      cells[cells.length] = cell;
      trs[i].appendChild(cell);
    }
  }

  let dif = [];
  for(let r in columns)
  {
    for(let i = 0; i < columns[r].length; i++)
    {
      if (dif[i] === undefined)
        dif[i] = [];

      dif[i][dif[i].length] = columns[r][i];
    }
  }

  for(let i = 0; i < dif.length; i++)
  {
    cells[i+1].textContent = dif[i];
  }
}

table {
  border: 1px solid white;
  text-align: center;
  padding: 6px;
  background: #e1edf9;
}

td {
  border: 1px solid white;
  text-align: center;
  padding: 6px;
}

td:first-child,
tr:first-child {
  background-color: #003a6a !important;
  color: white !important;
}

.table-scroll {
  position: relative;
  width: 100%;
  z-index: 1;
  margin: auto;
  overflow: auto;
}

.table-scroll table {
  width: 100%;
  min-width: 1280px;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.table-wrap {
  position: relative;
}

.table-scroll tr:first-child {
  background: #333;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ccc;
}

.table-scroll tfoot tr {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: #666;
  color: #fff;
  z-index: 4;
}

tr:first-child {
  z-index: 5;
}

@media screen and (max-width: 500px) {
  td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #ccc;
    max-width: 140px;
  }
}

.main-table:not(.result) th.result,
.main-table:not(.result) td.result
{
  display: none;
}

How to select items using a input checkbox?

Answers (1)

Related Questions