Solved

appending and detaching elements jquery

Posted on 2013-12-25
8
335 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
[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
  • 3
  • 3
8 Comments
 
LVL 53

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 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 100 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
LVL 53

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 400 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

Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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)
Suggested Courses

636 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