title: Select 2 columns of an HTML table based on the first column selected
body: <p>I have an HTML table with like 7 columns. When I select a column I want all the other columns to be hidden except the column next to the selected one. To be clear, only 2 columns need to be visible at a time - and those are the one selected and the one next to it. If there is a column to the right of the selected column, this one should be shown along with the selected column, if not (last column selected) the column to the left shall be shown along with the selected one.</p>
  
  <p>I tried using loops but the problem is the user can select any column from the table. </p>
  
  <p>My code:</p>
  
  <pre><code>    var I = document.getElementsByTagName("th").length;
      if(s=== I-1) { // s - index of selected column- check if its the last column
          for (var D = 0; D &lt; I-2; D++) {
              var o = datatable.column(D);
              o.visible(!o.visible());
          }
      } else {
          for (var D = 0; D &lt; s; D++) {                            
              var o = datatable.column(D);
              o.visible(!o.visible());
          }
  
          for (var D = s+1; D &lt; I; D++) {                         
              var o = datatable.column(D);
              o.visible(!o.visible());               
          }
     }
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;table id="DataTables_Table_0" &gt;
      &lt;thead&gt;
          &lt;tr role="row" style="height: 0px;"&gt;
              &lt;th&gt;
                  &lt;div&gt;Pro&lt;/div&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;div&gt;Pri&lt;/div&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;div&gt;State&lt;/div&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;div&gt;phyId&lt;/div&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;div&gt;Title&lt;/div&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;div&gt;Origin&lt;/div&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;div&gt;type&lt;/div&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody style=""&gt;
          &lt;tr role="row" class="odd"&gt;
              &lt;td class="0 sorting_1"&gt;Private&lt;/td&gt;
              &lt;td class="1"&gt;High&lt;/td&gt;
              &lt;td class="2"&gt;Create&lt;/td&gt;
              &lt;td class="3"&gt;E210DC29509F&lt;/td&gt;
              &lt;td class="4"&gt;5&lt;/td&gt;
              &lt;td class="5"&gt;8/9/2019, 8:24:00 AM&lt;/td&gt;
              &lt;td class="6"&gt;Issue&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr role="row" class="even"&gt;
              &lt;td class="0 sorting_1"&gt;Public&lt;/td&gt;
              &lt;td class="1"&gt;Low&lt;/td&gt;
              &lt;td class="2"&gt;Assign&lt;/td&gt;
              &lt;td class="3"&gt;E210DC29509F&lt;/td&gt;
              &lt;td class="4"&gt;5&lt;/td&gt;
              &lt;td class="5"&gt;8/9/2019, 9:11:11 AM&lt;/td&gt;
              &lt;td class="6"&gt;Issue&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr role="row" class="odd"&gt;
              &lt;td class="0 sorting_1"&gt;Private&lt;/td&gt;
              &lt;td class="1"&gt;Medium&lt;/td&gt;
              &lt;td class="2"&gt;Assign&lt;/td&gt;
              &lt;td class="3"&gt;E210DC29509F&lt;/td&gt;
              &lt;td class="4"&gt;5&lt;/td&gt;
              &lt;td class="5"&gt;8/9/2019, 9:17:26 AM&lt;/td&gt;
              &lt;td class="6"&gt;Issue&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr role="row" class="even"&gt;
              &lt;td class="0 sorting_1"&gt;Public&lt;/td&gt;
              &lt;td class="1"&gt;Urgent&lt;/td&gt;
              &lt;td class="2"&gt;Active&lt;/td&gt;
              &lt;td class="3"&gt;E210DC29509F&lt;/td&gt;
              &lt;td class="4"&gt;5&lt;/td&gt;
              &lt;td class="5"&gt;8/8/2019, 4:14:59 PM&lt;/td&gt;
              &lt;td class="6"&gt;Issue&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>An update to the question: I can select the 1st column always alonwith the column selected by the user. So that means I dont have to manually select the adjacent column from the table. I just modified the code: </p>
  
  <pre><code>for (var D = 1; D &lt; I/2 ; D++) { 
                              if (D !== s ) {
                                  var o = f.datatable.column(D);
                                  o.visible(!o.visible());
                              }
                          }
  </code></pre>
  
  <p>Now it works as expected. Actually this was for generating a line chart for the table data. Now i get a line chart, but i am just confused as to if the line chart does look as expected. I mean I have attached a screenshot of my line chart, but it looks like ther is something more to do. Sorry for not mentioning about the line chart as i thought it would make the question more complicated and confusing.<a href="https://i.stack.imgur.com/Ztqov.jpg" rel="nofollow noreferrer">linechart</a> <a href="https://i.stack.imgur.com/ogppI.jpg" rel="nofollow noreferrer">tabledata for the line chart</a></p>
  
  <p>How exactly should a line chart look with my table.</p>