Switching Nested Table Columns - HTML, jQuery Skills

Question

Switching Nested Table Columns - HTML, jQuery Skills

My experience with jQuery is still growing, but I'm well-versed in HTML and CSS.

Currently, I am tasked with developing a new report featuring a nested table displaying quarterly results. You can view a sample of the Quarterly Report here. When a user clicks on the image next to the Q1 or Q2 table row, my goal is for the Week (wk1 - wkn) columns to toggle visibility as needed. Furthermore, when week columns are hidden, I aim for the Quarterly column(s) to collapse and dynamically display the sum of the hidden weeks (wk1 - wkn). While most of the code has been borrowed from other sources, I have yet to find one that collapses and sums nested columns.

Thank you in advance for your assistance!

$(document).ready(function () {
 
 var mImg = "http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png";
 var pImg = "http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png";

     var sum1 = 0;
     $('tr').find('.combat1').each(function () {
         var combat1 = $(this).text();
         if (!isNaN(combat1) && combat1.length !== 0) {
             sum1 += parseFloat(combat1);
         }
     });
     var sum2 = 0;
     $('tr').find('.combat2').each(function () {
         var combat2 = $(this).text();
         if (!isNaN(combat2) && combat2.length !== 0) {
             sum2 += parseFloat(combat2);
         }
     });
     var sum3 = 0;
     $('tr').find('.combat3').each(function () {
         var combat3 = $(this).text();
         if (!isNaN(combat3) && combat3.length !== 0) {
             sum3 += parseFloat(combat3);
         }
     });

     $('.total-combat1').html(sum1);
     $('.total-combat2').html(sum2);
     $('.total-combat3').html(sum3);
     
     $('.header').click(function() {
                //$('td:nth-child(2)').hide();
                // if your table has header(th), use this
                $('td:nth-child(2),th:nth-child(2)').toggle();
            });
            
 });

body {
    background: #80dfff;
    color: #d5d4d4;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    margin: 0;
    overflow-x: auto;
    padding: 30px;
}
table {
    background: white;
    border-collapse: collapse;
    border: 1px #393939 solid;
    color: black;
    margin: 1em 1em 1em 0;
}
thead {
    border-collapse: collapse;
    color: black;
}
th, td {
    border: 1px #aaa solid;
    padding: 0.2em;
}

<table>
    <thead>
    <tr><th colspan=8>2015</th></tr>
    <tr><th colspan=4 class="header">Q1 
    <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
        </th>
        <th colspan=3 class="header">Q2 
    <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
       </th>
       
        <th></th>
    </tr>
        <tr>
            <th>WK1</th>
            <th>WK2</th>
            <th>WK3</th>
            <th>WK4</th>
            
            <th>WK1</th>
            <th>WK2</th>
            <th>WK3</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="combat1">8170</td>
            <td class="combat1">6504</td>
            <td class="combat1">6050</td>
            <td class="combat1">6050</td>
            
            <td class="combat1">7050</td>
            <td class="combat1">7050</td>
            <td class="combat1">7050</td>
            
            <td class="total-combat1"></td>
        </tr>
        <tr>
            <td class="combat2">8500</td>
            <td class="combat2">10200</td>
            <td class="combat2">7650</td>
            <td class="combat2">7650</td>
            
            <td class="combat2">8650</td>
            <td class="combat2">8650</td>
            <td class="combat2">8650</td>
            
            <td class="total-combat2"></td>
        </tr>
        <tr>
            <td class="combat3">9185</td>
            <td class="combat3">5515</td>
            <td class="combat3">6185</td>
            <td class="combat3">7185</td>
            
            <td class="combat3">9185</td>
            <td class="combat3">9185</td>
            <td class="combat3">9185</td>
            
            <td class="total-combat3"></td>
        </tr>
    </tbody>
</table>

javascript jquery html css

Answer 1

Answer №1

If you want to alternate the visibility of Q1 or Q2, you can adjust the header click event to achieve the desired effect shown in the code below.

The challenge lies in selecting all the cells you're interested in and then toggling their visibility.

One method is to narrow down the selected cells using jQuery's :lt and :gt selectors along with the css function.

Answer 2

If you want to alternate the visibility of Q1 or Q2, you can adjust the header click event to achieve the desired effect shown in the code below.

The challenge lies in selecting all the cells you're interested in and then toggling their visibility.

One method is to narrow down the selected cells using jQuery's :lt and :gt selectors along with the css function.

Answer 3

Answer №2

After analyzing your intentions, let me clarify: you are attempting to toggle the display of columns under a specific header column, like Q1, upon clicking on the header itself. If this is indeed the case, here is the modified code I came up with. I made enhancements by incorporating nested tables within the main table structure to segregate and manage the two sets of information effectively, enabling easy selection for toggling using jQuery.

$(document).ready(function() {

  var minusImage = "http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png";
  var plusImage = "http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png";

  var sum1 = 0;
  $('tr').find('.combat1').each(function() {
    var combat1 = $(this).text();
    if (!isNaN(combat1) && combat1.length !== 0) {
      sum1 += parseFloat(combat1);
    }
  });
  var sum2 = 0;
  $('tr').find('.combat2').each(function() {
    var combat2 = $(this).text();
    if (!isNaN(combat2) && combat2.length !== 0) {
      sum2 += parseFloat(combat2);
    }
  });
  var sum3 = 0;
  $('tr').find('.combat3').each(function() {
    var combat3 = $(this).text();
    if (!isNaN(combat3) && combat3.length !== 0) {
      sum3 += parseFloat(combat3);
    }
  });


  $('.header-1').click(function() {
    $("#table1").toggle();
  });

  $('.header-2').click(function() {
    $("#table2").toggle();
  });

});

body {
  color: #d5d4d4;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  margin: 0;
  overflow-x: auto;
  padding: 30px;
}
table {
  background: white;
  border-collapse: collapse;
  border: 1px #393939 solid;
  color: black;
  margin: 0;
  padding: 0;
}
thead {
  border-collapse: collapse;
  color: black;
}
th,
td,
tr {
  border: 1px #aaa solid;
  padding: 0;
}
td.combat {
  padding: 0.2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th colspan=2>2015</th>
    </tr>
    <tr>
      <th class="header-1">Q1
        <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
      </th>
      <th class="header-2">Q2
        <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <table id="table1">
          <tr>
            <th>WK1</th>
            <th>WK2</th>
            <th>WK3</th>
            <th>WK4</th>
          </tr>
          <tr>
            <td class="combat combat1">8170</td>
            <td class="combat combat1">6504</td>
            <td class="combat combat1">6050</td>
            <td class="combat combat1">6050</td>
          </tr>

          <tr>
            <td class="combat combat1">8170</td>
            <td class="combat combat1">6504</td>
            <td class="combat combat1">6050</td>
            <td class="combat combat1">6050</td>
          </tr>
        </table>
      </td>
      <td>
        <table id="table2">
          <tr>
            <th>WK1</th>
            <th>WK2</th>
            <th>WK3</th>
          </tr>
          <tr>
            <td class="combat combat2">7050</td>
            <td class="combat combat2">7050</td>
            <td class="combat combat2">7050</td>
          </tr>
          <tr>
            <td class="combat combat2">7050</td>
            <td class="combat combat2">7050</td>
            <td class="combat combat2">7050</td>
          </tr>
        </table>
      </td>
      <td>
        <table>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td></td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Answer 4

After analyzing your intentions, let me clarify: you are attempting to toggle the display of columns under a specific header column, like Q1, upon clicking on the header itself. If this is indeed the case, here is the modified code I came up with. I made enhancements by incorporating nested tables within the main table structure to segregate and manage the two sets of information effectively, enabling easy selection for toggling using jQuery.

$(document).ready(function() {

  var minusImage = "http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png";
  var plusImage = "http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png";

  var sum1 = 0;
  $('tr').find('.combat1').each(function() {
    var combat1 = $(this).text();
    if (!isNaN(combat1) && combat1.length !== 0) {
      sum1 += parseFloat(combat1);
    }
  });
  var sum2 = 0;
  $('tr').find('.combat2').each(function() {
    var combat2 = $(this).text();
    if (!isNaN(combat2) && combat2.length !== 0) {
      sum2 += parseFloat(combat2);
    }
  });
  var sum3 = 0;
  $('tr').find('.combat3').each(function() {
    var combat3 = $(this).text();
    if (!isNaN(combat3) && combat3.length !== 0) {
      sum3 += parseFloat(combat3);
    }
  });


  $('.header-1').click(function() {
    $("#table1").toggle();
  });

  $('.header-2').click(function() {
    $("#table2").toggle();
  });

});

body {
  color: #d5d4d4;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  margin: 0;
  overflow-x: auto;
  padding: 30px;
}
table {
  background: white;
  border-collapse: collapse;
  border: 1px #393939 solid;
  color: black;
  margin: 0;
  padding: 0;
}
thead {
  border-collapse: collapse;
  color: black;
}
th,
td,
tr {
  border: 1px #aaa solid;
  padding: 0;
}
td.combat {
  padding: 0.2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th colspan=2>2015</th>
    </tr>
    <tr>
      <th class="header-1">Q1
        <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
      </th>
      <th class="header-2">Q2
        <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <table id="table1">
          <tr>
            <th>WK1</th>
            <th>WK2</th>
            <th>WK3</th>
            <th>WK4</th>
          </tr>
          <tr>
            <td class="combat combat1">8170</td>
            <td class="combat combat1">6504</td>
            <td class="combat combat1">6050</td>
            <td class="combat combat1">6050</td>
          </tr>

          <tr>
            <td class="combat combat1">8170</td>
            <td class="combat combat1">6504</td>
            <td class="combat combat1">6050</td>
            <td class="combat combat1">6050</td>
          </tr>
        </table>
      </td>
      <td>
        <table id="table2">
          <tr>
            <th>WK1</th>
            <th>WK2</th>
            <th>WK3</th>
          </tr>
          <tr>
            <td class="combat combat2">7050</td>
            <td class="combat combat2">7050</td>
            <td class="combat combat2">7050</td>
          </tr>
          <tr>
            <td class="combat combat2">7050</td>
            <td class="combat combat2">7050</td>
            <td class="combat combat2">7050</td>
          </tr>
        </table>
      </td>
      <td>
        <table>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td></td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Switching Nested Table Columns - HTML, jQuery Skills

Answer №1

Answer №2

Similar questions

The functionality of the React Router DOM seems to be malfunctioning

Encountering a `Syntax Error` in a Jade view

Text wrapping over in 5 column design using Bootstrap

Can the mDNS string received through webRTC be decoded to retrieve a user's IP address?

transferring information between two html pages using javascript

Struggling to find and interact with a button element, however Selenium Webdriver is throwing a NoSuchElementException

Transitioning Dropdowns in Angular UI Bootstrap

Is there a simple way to transfer all the form data to a new popup window using javascript?

Error in MVC Ajax with Int32 data type

Parsing Problem---Is there a Parsing Error?

Calculating minutes per hour during a specific date range using JavaScript

What is the mechanism behind making a Promise appear synchronous when using a Proxy in JavaScript?

Incorporate Add to Homescreen functionality into your Angular 4 Project using JavaScript

Creating a fixed container with CSS in Internet Explorer 6

"Dragging and dropping may not always perfectly align with the position of the droppable div that is

jQuery SlideDown Navigation

Issues encountered during transition of HTML document to XML through VBA web scraping when attempting to click on a button

Using JQUERY for navigating through pages in a REST API while utilizing deferred functionality

Doing a simple HTTP GET request with RxJS does not do anything

The Google Docs viewer is displaying an empty screen