Deepankar Deepankar - 1 month ago 17
Javascript Question

Jquery Column toggle based on index() and custom attr issue

I have a table with two rows in header first row having colspan and second row having the second row headers see image below

table format

I have a jquery function which takes all the table cell values from the second header row and adds it a div with checkboxes along with index numbers later which is used to toggle. 1st Column, 2nd Column and 3rd Column goes to separate div's named speed, cons, dest

Now the toggle works ok it checks the index number for the column and adds hidden to it and accordingly the colspan reduces to match the table format.

But whenever the 2nd Column and 3rd Column's first checkbox is clicked the table breaks I am trying to figure out the issue but not able to make it work. Any suggestions ?

Here is the fiddle please suggest

Below is the filter toggle for one of the div

$('.dest input[type=checkbox]').click(function() {
var index = $(this).attr('index');

$('.table thead .this_h th').eq(index).toggleClass('hidden');
var hidden = $('.table thead th.hidden')
$.each(hidden, function() {
var idx = $(this).index() + 1;
$.each($('.table tbody tr'), function() {
$(this).find('td').eq(idx).hide();
});
});

var visible = $('.table thead .this_h th:not(.hidden)');
$.each(visible, function() {
var idx = $(this).index() + 1;
$.each($('.table tbody tr'), function() {
$(this).find('td').eq(idx).show();
});
});

var length = 0;
var temp_name = '';
$(".table thead tr:nth-child(2)").find('th').each(function(e, a) {

if (temp_name == $(a).attr('name')) {
console.log($(a).attr('name'));
if ($(a).is(':visible')) {
length = length + 1;
}
}
else
{
console.log(temp_name);
$(".table thead tr:nth-child(1)").find("th[name=" + temp_name + "]").attr('colspan', length);

if ($(a).is(':visible')) {
length = 1;
temp_name = $(a).attr('name');
} else {
length = 0;
}
}

})
});

Answer

Here you are.

var tableArr = new Array();
var flag = 0;
var speed = new Array();
var speed_index = new Array();
var cons = new Array();
var cons_index = new Array();
var dest = new Array();
var dest_index = new Array();

// Gets the values from the table cell and creates the checkboxes
function get_values() {
  if (flag == 0) {
    flag = 1;
    $.each(speed, function(i) {
      $(".top-filter .speed").append('<input type=\'checkbox\' index=' + speed_index[i] + '>&nbsp;' + speed[i] + '<br/>');
    });
    $.each(cons, function(i, val) {
      $(".top-filter .cons").append('<input type=\'checkbox\' index=' + cons_index[i] + '>&nbsp;' + cons[i] + '<br/>');
    });
    $.each(dest, function(i, val) {
      $(".top-filter .dest").append('<input type=\'checkbox\' index=' + dest_index[i] + '>&nbsp;' + dest[i] + '<br/>');
    });
  }
};


$(document).ready(function() {

  // to push the values from cell to array
  $('.table thead tr:nth-child(2) th').each(function(e, a) {
    if ($(a).attr('name') == 'speed') {
      speed.push($(this).text());
      speed_index.push($(this).index());
    } else if ($(a).attr('name') == 'cons') {
      cons.push($(this).text());
      cons_index.push($(this).index());
    } else {
      dest.push($(this).text());
      dest_index.push($(this).index());
    }
  });
  get_values();


  $('input[type=checkbox]').click(function() {

    var index = $(this).attr('index');

    var name = $(this).parent().attr("class");

    $('.table thead .this_h th').eq(index).toggleClass('hidden');
    var hidden = $('.table thead th.hidden')
    $.each(hidden, function() {
      var idx = $(this).index() + 1;
      $.each($('.table tbody tr'), function() {
        $(this).find('td').eq(idx).hide();
      });
    });

    var visible = $('.table thead .this_h th:not(.hidden)');
    $.each(visible, function() {
      var idx = $(this).index() + 1;
      $.each($('.table tbody tr'), function() {
        $(this).find('td').eq(idx).show();
      });
    });

    var length = $(".table thead tr:nth-child(2)").find("th[name=" + name + "]").filter(':visible').length;

    if (length === 0) {
      $(".table thead tr:nth-child(1)").find("th[name=" + name + "]").addClass("hidden");
    } else {
      $(".table thead tr:nth-child(1)").find("th[name=" + name + "]").removeClass("hidden").attr('colspan', length);
    }

  });
});
.hidden {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-condensed table-striped table-bordered">
    <thead>
        <tr>
            <th rowspan="2">Name</th>
            <th name="speed" colspan="3">1st Column</th>
            <th name="cons" colspan="4">2st Column</th>
            <th name="dest" colspan="3">3st Column</th>
        </tr>
        <tr class="this_h">
            <th name="speed">A</th>
            <th name="speed">B</th>
            <th name="speed">C</th>
            <th name="cons">D</th>
            <th name="cons">E</th>
            <th name="cons">F</th>
            <th name="cons">G</th>
            <th name="dest">H</th>
            <th name="dest">I</th>
            <th name="dest">J</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>22</td>
            <td>02</td>
            <td>05</td>
            <td>2</td>
            <td>52</td>
            <td>47</td>
            <td>22</td>
            <td>02</td>
            <td>05</td>
            <td>2</td>
        </tr>
    </tbody>
</table>
<div class="row top-filter">
    <div class="col-xs-3">
        <div class="speed">
        </div>
    </div>
    <div class="col-xs-3">
        <div class="cons">
        </div>
    </div>
    <div class="col-xs-3">
        <div class="dest">
        </div>
    </div>
</div>