CODEWITHSUNDEEP
javascriptjqueryhtml
user5563910
user5563910

Reputation:

Jquery Toggle Table Column Using a Better Method

I have a table with around 30 columns and the idea is to let the user select which columns to be hidden or shown. The reason for this is to let them select which columns will be visible when they print.

To tackle this problem, I have assigned a class name to each column and i'm using jQuery's toggle function. This works fine, but I was wondering if there is a better way to go about it that is more efficient and cleaner than what I am currently using. I have a separate function for each column and my code looks like this:

jQuery

function tablecolumn1toggle(){
    $(".column1").toggle();
}

function tablecolumn2toggle(){
    $(".column2").toggle();
}

function tablecolumn3toggle(){
    $(".column3").toggle();
}

HTML Simplified toggle column 1 toggle column 2 toggle column 3

    <table class="table table-bordered" id="points_table">
     <tbody>
     <tr>
        <th class="column1>Route</th>
        <th class="column2">Location</th>
        <th class="column3>Track</th>
     </tr>
     </tbody>
     </table>

and so on..

I am using a button to call each toggle function, I will use checkboxes once I have the basic code working. So, is there a way for me to cut down the amount of code?

EDIT: Thank you all for your answers, it was really hard to pick a single answer but i'm grateful for all your input.

Upvotes: 1

Views: 2292

Answers (5)

Me.Name
Me.Name

Reputation: 12544

A bit of a late addition, but to add one more alternative: if you have multiple setups of this kind and you don't want to add classes each time, you can show or hide a column with something like $('tr *:nth-child(' + (ColumnIndex + 1) + ')', table).toggle();. Especially if you change the column order in the future, the class approach can come to bite you.

One step further, is not to define the checkboxes beforehand, but have JQuery create them on the fly. This is also easier in maintaining the page and with the added benefit that you can assign the column index while creating the input objects and don't have to add any special attributes in design time.

All in all, the html would be as light as possible (no classes or properties) and doesn't have to be maintained. An example where the checkboxes are added in a div:

var table = $('table'); //add an id if necessary
var cols = $('th', table); //headers
var div = $('<div>'); //new div for checkboxes
cols.each(function(ind){    
    $('<label>').text($(this).text()).append(
        $('<input type="checkbox" checked=true>') //create new checkbox
      .change(function(){
        $('tr *:nth-child(' + (ind + 1) + ')', table).toggle();         
      })
     ).appendTo(div);
});

table.before(div); //insert the new div before the table

Fiddle

Upvotes: 2

Vadivel S
Vadivel S

Reputation: 660

You Pass number 1,2,3 function

Try this

function tablecolumn1toggle(id){
$(".column"+id).toggle();
}

function call like this

tablecolumn1toggle(1); or
tablecolumn1toggle(2); or
tablecolumn1toggle(3);

OR

 function tablecolumn1toggle(colum_name){
$(colum_name).toggle();
}

function call like this

tablecolumn1toggle(column1); or
tablecolumn1toggle(column2); or
tablecolumn1toggle(column3);

Upvotes: 0

AKS
AKS

Reputation: 19841

If you want to do it dynamically using checkboxes, add a data property to the checkbox

<input class='toggleColumns' type="checkbox" data-target="column1" />
<input class='toggleColumns' type="checkbox" data-target="column2" />
<input class='toggleColumns' type="checkbox" data-target="column3" />
<input class='toggleColumns' type="checkbox" data-target="column4" />

then add a change event on the checkbox:

$('.toggleColumns').on('change', function (e) {
    // get the target for this checkbox and toggle it
    var tableColumn = $(e.currentTarget).data('target');
    $('.' + tableColumn).toggle();
});

Here is working fiddle: https://jsfiddle.net/9Ls49w97/

Upvotes: 2

fdomn-m
fdomn-m

Reputation: 28611

Here's one way to make it simpler.

Give each button a data-col value and the matching column element(s) the same data-col value, then they can be paired in a simple function:

<button data-col='column1'>toggle</button>
<button data-col='total'>toggle</button>
<button data-col='other'>toggle</button>
<div class="col" data-col="column1">
   column 1
</div>
<div class="col" data-col="total">
   total column
</div>
<div class="col" data-col="other">
   other
</div>

and code

$(function() {
  $("button[data-col]").on("click", function() {
      var col = $(this).data("col");
      $(".col[data-col='" + col + "']").toggle();
  });
})

Simple fiddle demo: https://jsfiddle.net/bb1mm0cp/

Upvotes: 0

john Smith
john Smith

Reputation: 17916

/* number is a parameter now */
function tablecolumntoggle(i){
    $(".column"+i).toggle();
}

/* example to iteratly call */
for (var i = 1; i <= 3; i++) {
  tablecolumntoggle(i);
};

Upvotes: 0

Related Questions