Reputation: 11
I have a page where I am dynamically trying to hide columns in tables of class exception_table based on the value in the td
of class tdHideShow
.
If the value is not equal to a value the user has selected strDMM
, from a dropdown I want to hide the td
, thus hiding that column of my table. Something in the syntax of my else is not working correctly, the td
is not being hidden.
$('.exception_table',this).each(function(ind,obj){
if(!($('tr td.tdHideShow',this).hasClass(strDMM))){
$(this).hide();
}
else{
count++;
}
$('tr td.tdHideShow',this).each(function(ind,obj){
if(!($(this).hasClass(strDMM))){
//trying to hide the column if it is missing the class I am looking for
}
});
});
if(count==0){
$(this).parent.hide();
}
});
Here is my sample html. I want any table that does not have class Bob, and hide columns that are not Bob. I am hiding the divs that don't have Bob in any table, hiding the tables that don't have Bob at all. I need to hide the table column in the first div, first table, that contains Billy. The html is dynamic and changes, the user filters on DMM name.
<div class="East">
<table class="exception_table">
<tr>
<td>DMM NAME</td>
<td class="tdHideShow Bob">Bob</td>
<td class="tdHideShow Bob">Bob</td>
<td class= "tdHideShow Billy">Billy</td>
</tr>
<tr>
<td>Sales</td>
<td>$1</td>
<td>$5</td>
<td>$10</td>
</tr>
<tr>
<td>Tenure</td>
<td>2 years</td>
<td>2 years</td>
<td>1 year</td>
</tr>
</table>
<table class="exception_table">
<tr>
<td>DMM NAME</td>
<td class="tdHideShow Paul">Pal</td>
<td class="tdHideShow Doug">Doug</td>
<td class= "tdHideShow Joe">Joe</td>
</tr>
<tr>
<td>Sales</td>
<td>$5</td>
<td>$6</td>
<td>$70</td>
</tr>
<tr>
<td>Tenure</td>
<td>7 years</td>
<td>9 years</td>
<td>2 years </td>
</tr>
</table>
<table class="exception_table">
<tr>
<td>DMM NAME</td>
<td class="tdHideShow Tim">Tim</td>
<td class="tdHideShow Tim">Tim</td>
<td class= "tdHideShow Tim">Tim</td>
</tr>
<tr>
<td>Sales</td>
<td>$1</td>
<td>$5</td>
<td>$10</td>
</tr>
<tr>
<td>Tenure</td>
<td>1 years</td>
<td>1 years</td>
<td>1 years</td>
</tr>
</table>
</div>
</html>
Upvotes: 1
Views: 1587
Reputation: 1919
If you add the classes like class="tdHideShow Bob"
to each row, then this will work:
function onlyShow(show) {
$('.exception_table tr td.tdHideShow').each(function (ind, obj) {
$(this).hasClass(show) ? $(this).show() : $(this).hide()
});
}
onlyShow('Bob');
Or the advanced version: https://jsfiddle.net/favvsz9k/
function hideOthers(show) {
var $table, colNumber, $colHead, $colsCorresponding, visibleCols;
// loop through each table
$('.exception_table').each(function (ind, obj) {
$table = $(this);
colNumber = 0;
visibleCols = 0;
// Check each td of the first column on this table (header elements)
$table.find('tr:eq(0) td').each(function (ind, obj) {
$colHead = $(this);
// Is it a hide/show relevant column?
if ($colHead.hasClass('tdHideShow')) {
$colsCorresponding = $table.find('tr td:nth-child(' + colNumber + ')');
// Should the column be shown?
if ($colHead.hasClass(show)) {
$colsCorresponding.show();
visibleCols++;
} else {
$colsCorresponding.hide();
}
}
colNumber++;
});
// hide the table if there are no cols visible on it
visibleCols ? $table.show() : $table.hide();
});
}
var strDMM = 'Paul';
hideOthers(strDMM);
Upvotes: 1