Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

appending and detaching elements jquery

Posted on 2013-12-25
8
Medium Priority
?
337 Views
Last Modified: 2013-12-25
Hi Experts

http://jsfiddle.net/Qgj52/2

It works fine, but only issue is when i use the default selected, it shows in the td, how can i detach it and attach it again, it does not work. remove is also not working as it completely removes the element, hide is not option here

please guide
0
Comment
  • 3
  • 3
8 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39738991
I think you meant to use this link http://jsfiddle.net/Qgj52/2/

Unless somebody else understands this, I think I am confused as to what you want to do.

>how can i detach it and attach it again

Can you detail what you mean, I think I am missing something.
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 39738997
the code you have seen in the fiddle it works fine, now the issue is you see the default option as "Al Sections"

What i am trying is when i select from drop down any other value, it should reflect the th and the TD which is dynamicaaly created

Now, when i again do back forth and select "all selections" again, it should not display that column. and when i again choose another value, it should start again

i tried using hide, detach, remove but it does not work as expected
0
 
LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 400 total points
ID: 39739008
Like this http://jsfiddle.net/Qgj52/3/ ?
If you select "all my selections" you go back to default?

$(function () {
    var firstTime = true;

    $("#myselction").change(function (e) {
        var neData = $("#myselction").val();

        if (firstTime) {
            $("table.data thead tr").append("<th>Idea</th>");
            $("table.data tr:gt(0)").append("<td>" + neData + "</td>");
          firstTime = false;
        } else {
            if (neData!="All Selections(4)"){
            $("table.data tr:gt(0) td:last-child").html(neData);
        }else{
         $("table.data th:last-child, table.data td:last-child").remove();   
        }
            
        }
    });
});

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39739015
....update....  I think this is what you want http://jsfiddle.net/Qgj52/4/

$(function () {
    var firstTime = true;

    $("#myselction").change(function (e) {
        var neData = $("#myselction").val();

        if (firstTime) {
            $("table.data thead tr").append("<th>Idea</th>");
            $("table.data tr:gt(0)").append("<td>" + neData + "</td>");
          firstTime = false;
        } else {
            if (neData!="All Selections(4)"){
            $("table.data tr:gt(0) td:last-child").html(neData);
        }else{
              var colCount = 0;
              $('tr:nth-child(1) td').each(function () {
              if ($(this).attr('colspan')) {
                  colCount += +$(this).attr('colspan');
              } else {
                 colCount++;
                }
              });
            
            if (colCount>2){
                $("table.data th:last-child, table.data td:last-child").remove(); 
             firstTime = true;
            } 
        }
            
        }
    });
});

Open in new window

0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 39739034
third one seems good, only thing is: when i elect "All selections", it should remove the td of IDEA and when i choose again the dropdown value of 100 or 104, the IDEA td should appear again
0
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 1600 total points
ID: 39739042
Hi,
you mean something like this?
$(function () {
    var ideaColumnExists = false;

    $("#myselction").change(function (e) {
        var neData = $("#myselction").val();
        if (neData == "All Selections(4)") {
            ideaColumnExists = false;
            $("table.data th:last-child, table.data td:last-child").remove();
        } else {
            if (!ideaColumnExists) {
                $("table.data thead tr").append("<th>Idea</th>");
                $("table.data tr:gt(0)").append("<td>" + neData + "</td>");
                ideaColumnExists = true;
            } else {
                $("table.data tr:gt(0) td:last-child").html(neData);
            }
        }
    });
});

Open in new window


jsfiddle: http://jsfiddle.net/EE_RainerJ/kQXL7/

HTH and merry xmas
Rainer
0
 
LVL 16

Author Closing Comment

by:Gurpreet Singh Randhawa
ID: 39739069
Thanks Guys
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

926 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