How to change the values of colspan with click of buttons

aastha 0
Viewed 48

Can you guys please help me. I have total of 7 buttons which toggle hide and show of columns example if button 1 is pressed once it will hide column 1 and then button 1 is again pressed it will show column 1 and the rest 6 buttons perform the same operation. But is it possible that if I click any one button from the 7 buttons it will change the colspan of <th> to 6, if any 2 buttons are clicked it will then change the colspan to 5 and if any 3 buttons are clicked it will then change the colspan to 4 and so on...

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $('#hide1').click(function(){
     $('.col1').toggle();
   });
 });
 </script>
<script>
  $(document).ready(function(){
  $('#hide2').click(function(){
     $('.col2').toggle();
   });
 });
 </script>
 <script>
  $(document).ready(function(){
  $('#hide3').click(function(){
     $('.col3').toggle();
   });
 });
 </script>
 <script>
  $(document).ready(function(){
  $('#hide4').click(function(){
     $('.col4').toggle();
   });
 });
 </script>
 
 <script>
  $(document).ready(function(){
  $('#hide5').click(function(){
     $('.col5').toggle();
   });
 });
 </script>
 <script>
  $(document).ready(function(){
  $('#hide6').click(function(){
     $('.col6').toggle();
   });
 });
 </script>
 <script>
  $(document).ready(function(){
  $('#hide7').click(function(){
     $('.col7').toggle();
   });
 });
 </script>
 
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th id="myTd" colspan="7">abcd</th>
    <th id="myTd" colspan="7">abcd</th>
    <th id="myTd" colspan="7">abcd</th>
    <th id="myTd" colspan="7">abcd</th>
    
  </tr>
  <tr>
    <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
     
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
  </tr>
  
  <tr>
    <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
     
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
  </tr>
  <tr>
    <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
     
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
  </tr>
  <tr>
    <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
     
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
  </tr>
  <tr>
    <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
     
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
  </tr>
  <tr>
    <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
     
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
     <td class="col1">col1</td>
    <td class="col2">col2</td>
    <td class="col3">col3</td>
    <td class="col4">col4</td>
    <td class="col5">col5</td>
    <td class="col6">col6</td>
    <td class="col7">col7</td>
 
  </tr>
  
</table>
<br> 

<button id="hide1">1</button><button id="hide2">2</button><button id="hide3">3</button><button id="hide4">4</button><button id="hide5">5</button><button id="hide6">6</button><button id="hide7">7</button>


</body>
</html>

Till now I have come up with this JS code for changing the value of colspan

function myFunction() {
  document.getElementById(\"myTd\").colSpan = \"13\";
}
jquery javascript html
1 Answers

Given that you're grouping the cells of each row in to 4 headings, you can calculate the colspan after toggling the visibility of a cell group by using: number of visible cells in the row / number of headings.

Also note that you can make the JS much more simple by using a single event handler for all buttons. Use a data attribute to hold the index of the .colX which each button controls.

In addition, note that you only need one document.ready handler. All your jQuery code can be placed within that. In addition, you need to remove the duplicate id="myTd" attribute on the th elements. You cannot repeat the same id throughout the DOM - they must be unique.

Here's a working example with all of the above changes applied:

jQuery($ => {
  let $headings = $('.heading');

  $('.hide').on('click', e => {
    let $el = $('.col' + e.target.dataset.targetIndex).toggle();
    let colspan = $('table tbody tr:first > td:visible').length / $headings.length;
    $headings.prop('colspan', colspan);
  });
});
table,
th,
td {
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th class="heading" colspan="7">abcd</th>
      <th class="heading" colspan="7">abcd</th>
      <th class="heading" colspan="7">abcd</th>
      <th class="heading" colspan="7">abcd</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
    </tr>
    <tr>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
    </tr>
    <tr>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
    </tr>
    <tr>
      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>

      <td class="col1">col1</td>
      <td class="col2">col2</td>
      <td class="col3">col3</td>
      <td class="col4">col4</td>
      <td class="col5">col5</td>
      <td class="col6">col6</td>
      <td class="col7">col7</td>
    </tr>
  </tbody>
</table>
<br>

<button class="hide" data-target-index="1">1</button>
<button class="hide" data-target-index="2">2</button>
<button class="hide" data-target-index="3">3</button>
<button class="hide" data-target-index="4">4</button>
<button class="hide" data-target-index="5">5</button>
<button class="hide" data-target-index="6">6</button>
<button class="hide" data-target-index="7">7</button>

Rory McCrossan0
Related