Solved

Issues with the Code which i am trying to do in jquery for filtering and hiding showing

Posted on 2013-12-25
4
354 Views
Last Modified: 2013-12-25
Having a code where I need to do the following,

Having a dropdown, I will select the item from the dropdown and it will create show the hidden TD and filter the whole table based on that, once I select its default option, it will again hide the TD column of that specific search dropdown and show all records of the table

Its is like on dropdown selection - filter and showing of TD column is required

on its default selection of dropdown - clear filter and hide the the TD Column

I hope i made the things clear here, if any doubts, please ask
$().ready(function () {
$("#idea").change(function(e) {
    $('table.data').find('tbody tr').hide();
    var ndata = $("#idea").val();
    var len=ndata.length;
    if(len>0){
        $('table.data tbody tr').each(function(){
            coldata=$(this).children().eq(8);
            //alert(coldata.text());
            if(coldata.text().toUpperCase() == ndata.toUpperCase()) {
                $(this).show();
            }
            else if(ndata == 'select One'){
                $(this).show(); 
            }
        });
    }
});
});

Open in new window



      

my HTML Code

<table width="100%" border="0" cellspacing="2" cellpadding="1" class="data center">
    <thead>
        <tr>
            <th width="3%">&nbsp;</th>
            <th width="4%">&nbsp;</th>
            <th width="3%">&nbsp;</th>
            <th width="8%">a#</th>
            <th width="15%">b</th>
            <th width="14%">cBy</th>
            <th width="18%">d.</th>
            <th width="22%">e?</th>
            <th width="13%">idea</th>
        </tr>
    </thead>
    <tbody>
        <tr> goes here</tr>
    </tbody>
</table>

Open in new window


The question is about two things, Code is working partially and

1. On Drop Down selection filter records based upon its selection and show the hidden TD column

2. Back when default option of Dropdown is selected, clear all filtered records and hide the the TD Column of that associated dropdown
0
Comment
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 10

Expert Comment

by:Korbus
ID: 39739254
Sorry but I'm not quite clear on your description.  In particular I didn't understand this part, can you elaborate & define "TD"?

"it will create show the hidden TD"


Looking at the code, I think I see where you are showing the column on filter condition: If you want the column hidden when no selection is made (or perhaps I misunderstnd), dont you want to HIDE it under the "select one" condition?
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 39739266
TD means table column

1. I want to hide the TD and clear the filter also it when the condition is (select one).. anytime

2. I want to show the TD if the condition is changed to something else and based upon that condition, it filters the records too to show in the full table structure, and again doing a select one.. resets the filter

please let me know if still not clear
0
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
ID: 39739312
Hi,
so initially the last column is hidden and just visible as soon as in the select box an option is selected other than "select one"?

Then please try this:
http://jsfiddle.net/EE_RainerJ/Xm5PV/

$(document).ready(function () {
    // Initially hide the last column
    $("table.data th:last-child, table.data td:last-child").hide();
    
$("#idea").change(function(e) {
    $('table.data').find('tbody tr').hide();
    var ndata = $("#idea").val();
    var len=ndata.length;
    if(len>0){
        if(ndata.toUpperCase() == 'SELECT ONE'){
            $("table.data th:last-child, table.data td:last-child").hide();
        } else {
            $("table.data th:last-child, table.data td:last-child").show();
        }
        $('table.data tbody tr').each(function(){
            coldata=$(this).children().eq(8);
            //alert(coldata.text());
            if(coldata.text().toUpperCase() == ndata.toUpperCase()) {
                $(this).show();
            }
            else if(ndata.toUpperCase() == 'SELECT ONE'){
                $(this).show(); 
            }
        });
    }
});
});

Open in new window


HTH and merry xmas
Rainer
0
 
LVL 16

Author Closing Comment

by:Gurpreet Singh Randhawa
ID: 39739331
Hi, You made my Day,

Cheers rainer, Merry xmas
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question