0

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;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table-scroll" class="table-scroll">
  <table id="main-table" class="main-table">
    <tbody>
      <tr>
            <th>One</th>
            <th>Two <input type="checkbox" id="c2" value="on" name="cb2"/></th>
            <th>Three<input type="checkbox" id="c3" value="on" name="cb3"/></th>
            <th>Four<input type="checkbox" id="c4" value="on" name="cb4"/></th>
            <th>Five<input type="checkbox" id="c5" value="on" name="cb5"/></th>
        </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>21</td>
        <td>2</td>
        <td>93</td>
        <td>74</td>
        <td>85</td>
      </tr>
      <tr>
        <td>21</td>
        <td>32</td>
        <td>93</td>
        <td>24</td>
        <td>15</td>
      </tr>
      <tr>
        <td>91</td>
        <td>72</td>
        <td>13</td>
        <td>14</td>
        <td>85</td>
      </tr>
      <tr>
        <td>411</td>
        <td>422</td>
        <td>423</td>
        <td>144</td>
        <td>145</td>
      </tr>
      <tr>
        <td>151</td>
        <td>522</td>
        <td>93</td>
        <td>54</td>
        <td>515</td>
      </tr>
      <tr>
        <td>610</td>
        <td>621</td>
        <td>363</td>
        <td>464</td>
        <td>65</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
        <td>13</td>
        <td>41</td>
        <td>5</td>
      </tr>
      <tr>
        <td>11</td>
        <td>120</td>
        <td>143</td>
        <td>214</td>
        <td>5</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
      </tr>
      <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
        <td>35</td>
      </tr>
      <tr>
        <td>41</td>
        <td>42</td>
        <td>43</td>
        <td>44</td>
        <td>45</td>
      </tr>
      <tr>
        <td>51</td>
        <td>52</td>
        <td>53</td>
        <td>54</td>
        <td>55</td>
      </tr>
      <tr>
        <td>61</td>
        <td>62</td>
        <td>63</td>
        <td>64</td>
        <td>65</td>
      </tr>
     
    </tbody>
  </table>
</div>
halfer
  • 19,824
  • 17
  • 99
  • 186
sd_30
  • 576
  • 1
  • 6
  • 21
  • 2
    It seems that the checkboxes specify which columns to include. One method is to find the indices of `` elements that contain checked boxes and use those indices to reference the appropriate columns as you iterate through the table's rows. It might help to break the project into sections and let us know where specifically you get stuck. For example, to bind a handler function to a checkbox's change event, see [this example](https://stackoverflow.com/a/50012963/924299). – showdev May 19 '21 at 04:57
  • no this wont work, because here for every td element we are specifying a checkbox. That is not the case with me. For me its on header and then and i want all the elements below that header so I am not getting how to bind those column items with the header checkbox. – sd_30 May 19 '21 at 05:06
  • 2
    Add the jQuery and JavaScript to your post as a [mcve]. Or remove the ` javascript` and `jquery` tags. – zer00ne May 19 '21 at 05:08
  • 2
    I'm suggesting using a column index. E.g. the "Header 3" cell has a [cellIndex](https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-80748363) of 2. Each cell with an index of 2 is in the "Header 3" column. – showdev May 19 '21 at 05:10
  • 1
    You might also find [Javascript get entire 2nd column](https://stackoverflow.com/questions/22097155/javascript-get-entire-2nd-column) and [this demo](http://jsfiddle.net/kimiliini/GeeLJ/) helpful. – showdev May 19 '21 at 05:21
  • yes i have edited and hardcoded the header but it should be dynamic specific to checkbox being checked, still I am not able bind the checkbox to particular column – sd_30 May 19 '21 at 07:57

1 Answers1

1

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table-scroll" class="table-scroll">
  <table id="main-table" class="main-table">
    <tbody>
      <tr>
            <th>One</th>
            <th>Two <input type="checkbox" id="c2" value="on" name="cb2"/></th>
            <th>Three<input type="checkbox" id="c3" value="on" name="cb3"/></th>
            <th>Four<input type="checkbox" id="c4" value="on" name="cb4"/></th>
            <th>Five<input type="checkbox" id="c5" value="on" name="cb5"/></th>
        </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>21</td>
        <td>2</td>
        <td>93</td>
        <td>74</td>
        <td>85</td>
      </tr>
      <tr>
        <td>21</td>
        <td>32</td>
        <td>93</td>
        <td>24</td>
        <td>15</td>
      </tr>
      <tr>
        <td>91</td>
        <td>72</td>
        <td>13</td>
        <td>14</td>
        <td>85</td>
      </tr>
      <tr>
        <td>411</td>
        <td>422</td>
        <td>423</td>
        <td>144</td>
        <td>145</td>
      </tr>
      <tr>
        <td>151</td>
        <td>522</td>
        <td>93</td>
        <td>54</td>
        <td>515</td>
      </tr>
      <tr>
        <td>610</td>
        <td>621</td>
        <td>363</td>
        <td>464</td>
        <td>65</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
        <td>13</td>
        <td>41</td>
        <td>5</td>
      </tr>
      <tr>
        <td>11</td>
        <td>120</td>
        <td>143</td>
        <td>214</td>
        <td>5</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
      </tr>
      <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
        <td>35</td>
      </tr>
      <tr>
        <td>41</td>
        <td>42</td>
        <td>43</td>
        <td>44</td>
        <td>45</td>
      </tr>
      <tr>
        <td>51</td>
        <td>52</td>
        <td>53</td>
        <td>54</td>
        <td>55</td>
      </tr>
      <tr>
        <td>61</td>
        <td>62</td>
        <td>63</td>
        <td>64</td>
        <td>65</td>
      </tr>
     
    </tbody>
  </table>
</div>
vanowm
  • 9,466
  • 2
  • 21
  • 37