Skryjema a odkryjem sloupce

by Petr Haluza

HTML

<p>Skryjem a odkryjem</p>
<div class="hide-cols">
<table class="demotbl" id="show-hide-cols">
<thead>
  <tr>
      <th>Product ID</th>
      <th>Name</th>
      <th class="canHide">Quality</th>
      <th class="canHide">Quantity</th>
  </tr>
    </thead>
    <tbody>  
  <tr>
      <td>1</td>
      <td>Product 1</td>
      <td>Good Quality</td>
      <td>500 Items</td>
  </tr>
  <tr>
      <td>2</td>
      <td>Product 2</td>
      <td>Good Quality</td>
      <td>500 Items</td>
  </tr>
  <tr>
      <td>3</td>
      <td>Product 3</td>
      <td>Good Quality</td>
      <td>800 Items</td>
  </tr> 
  <tr>
      <td>4</td>
      <td>Product 4</td>
      <td>Good Quality</td>
      <td>500 Items</td>
  </tr>
  <tr>
      <td>5</td>
      <td>Product 5</td>
      <td>Good Quality</td>
      <td>500 Items</td>
  </tr> 
  <tr>
      <td>6</td>
      <td>Product 6</td>
      <td>Good Quality</td>
      <td>500 Items</td>
  </tr> 
  </tbody>
</table>

<div id="show"></div>
</div>

CSS

body,
html {  font: 100%/1.5em sans-serif;}
.hide-cols {  margin-bottom: 20px;}
.hide-cols td,
.hide-cols th {  padding: 5px;}
.hide-cols th {  background: #789;  color: #fff;}
.hide-cols tr:nth-child(even) td {  background: #cde;}


.hide-cols th.canHide {  position: relative; }
.hide-cols .hide-col {  background: #456; border-radius: 50%; width: 20px; height: 20px; 
color: #fff; border: none; position: absolute; right: 0; top: -10px; cursor: pointer;}
.hide-cols .hide-col:hover {  background: #222;}
.hide-cols #show {  cursor: pointer;  margin-top: 20px;}
.hide-cols #show .btn {  margin-right: 0.5em;}
.hide-cols #show .sort {  display: none;}

JavaScript

(function ($) {
	$.fn.hideCols = function (options) {

	var settings = $.extend({	hideColumn: '&times;', unhideColumn: 'Ukaž', unhideAll: 'Ukaž vše',	}, options);
	var $table = this, $show = $('#show'), links = 0;

	// Najít th skrývatelnýhgo sloupce apřidat tlačítko
	$table + $('th.canHide')
			.css({paddingRight: 0, paddingTop: 0})
			.prepend('<div><button class="hide-col">' + settings.hideColumn + '</button>')
			.append('</div>')
      ;

	//klik na skrývací button:
	$table + $('th .hide-col').click(function() {
		//skryju th
		var col = $(this).parent().parent('th').index();
		$(this).parent().parent('th').fadeOut('fast');
		//skryju odpovídající td
		$table + $('tr').each(function() { 
			$('td:eq(' + col + ')',this).fadeOut('fast');
		});

		//vytvořím tlačítko pro odkrytí sloupce
		$show.append('<button data-show="' + col + '">' + settings.unhideColumn + ' ' + (col + 1)  + '</button>');

		links++;
		/*if (settings.autoSort == true ) {			
			sortButtons();
		}*/
		return false;
	});
		
	//this happens when a link to show one or all columns is clicked:
	$show.on('click','button', function(event){

		/*if ($(this).hasClass('unhideAll')) {
			//when the link to show all columns is clicked
			$show.children('button').remove(); //remove all show columns links
			$show.find('.sort').hide(); //hide sort button
			this + $('td, th').fadeIn('slow'); //show all hidden cells
		} else {*/
			//gets the number of the columns to be shown
			var col = $(this).data('show');

		//displays the td and th of the column that is clicked in each row
		$table + $('tr').each(function() { 
			$('th:eq(' + col + '),td:eq(' + col + ')',this).fadeIn('fast');
		});

		links--;
		//remove unhideAll when there are no more individual show links
		if (links == 0) {
			$show.children().remove(); //remove all show columns links
		}				
		//remove this show link
		$(this).next('br').remove();
		$(this).remove();
		//}
	});	
		
		/*$show.on('click', '.sort', function()...