maybe i need to be more specific in where i post my questions coz i posted one in web development. so ill reiterate im trying out this cloning and toggling thing to see if they could work together. ive got a table like so:

<table class="StateTable" rules="all" cellpadding="0" cellspacing="0">
   <thead>
      <tr class="statetablerow">
         <th style="width:33%">Table</th>
      </tr>
   </thead>
   <tbody>
     <tr id="2">
     </tr>
   </tbody>
</table>

and another which if u notice has style display:none:

<table class="CityTable" rules="all" cellpadding="0" cellspacing="0" style="display:none" id="scroll">
               <thead>
                  <tr>
                     <th style="width:33%">Table</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>Name #1</td>
                  </tr>
                  <tr>
                     <td>Name #2</td>
                  </tr>
                  <tr>
                     <td>Name #3</td>
                 </tr>
              </tbody>
           </table>

what im trying to do is clone table ".CityTable" into table ".StateTable" after button click and thats working just fine. the issue im facing is that the th of .CityTable is suppose to toggle when it gets cloned into ".StateTable". ".CityTable" toggles just fine if it is not cloned and displayed as it is, it's only when it's cloned the toggle doesnt work.

<button class="dip">Clone 3</button>

toggle:

<script type="text/javascript">
$(document).ready(function(){
    $('.CityTable thead').click(
        function() {
            $(this) .parents('.CityTable').children('tbody').toggle();
        }
    )
});
</script>

i tried swapping/changing the name for parents and children and the element that click, but i dont think its right or if i did it right coz it didn't work anyway.

clone:

<script>
        $(document).ready(function($) {
        $(".dip").click(function() {
            $('#scroll')
                .clone()
                    .removeAttr('id')
                    .show()
                    .appendTo( $('#2').parent() );
        });
    });
</script>

is this not the right way? is there a different way of approaching this? thanks in advance!

Why don't you just clone the table's <body> element's content and insert it into the other table's body? Why are you cloning the whole table and to which exact element are you cloning it? A <td> element in the other table, or another element?

huh. i didnt think about that. i want this from table CityTable:
coz thead click is gonna make the tbody toggle

<thead>
<tr>
   <th style="width:33%">Table</th>
</tr>
</thead>
<tbody>
<tr>
   <td>Name #1</td>
</tr>
<tr>
   <td>Name #2</td>
</tr>
<tr>
   <td>Name #3</td>
</tr>
</tbody>

into a row in StateTable

Well I'm not sure, but I don't think you can insert a whole new <thead> and <tbody> into an existing <tbody> straight away. I think you should either insert a whole new <table> into a <td> tag of an existing table, insert <tr> tags into an existing <tbody>, or insert a new <tbody> into an existing <table>. Inserting <thead> into a <tbody> is not how it is supposed to work, for as far as I know.

Therefore, why don't you just clone the whole table you want to clone and copy instead of just the <tbody>, and insert it into the <td> tag of the new table instead of into the <tbody>?

E.g.:

var clone = $('table#scroll').clone();
clone.appendTo('tr#2');

actually im fine with the cloning its just that i want the thead of #scroll to be able to toggle after the cloning. when #scroll is as it is, meaning that it isnt hidden and isnt cloned the thead toggles as it should. its just when its cloned the toggle function no longer works on #scroll. is there a way around this?

Yes :). It's because when the document is ready, a function checks for the existence of .CityTable thead elements and enables toggle functionality for them. If you clone the element, however, a new element is added to the page, without the toggle functionality. If you re-execute the stuff that is in your $(document).ready() function, it should work.

okay im totally confusing myself with this re-executioning. from all the googling, what i understand is that i need to have something like this:

function afterClone()
{
    //toggle function(?)
}

which will be triggered by an onclick which would be in <button class="dip">Clone 3</button>? or not?

You need to re-assign the onclick functionality after you clone the content, because the cloned content doesn't have any onclick functionality yet. So I guess you need to execute this code again after you clone the content:

 $('.CityTable thead').click(
    function() {
        $(this) .parents('.CityTable').children('tbody').toggle();
    }
)
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.