Member Avatar for nadiam

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!

  • 2 Contributors
  • 7 Replies
  • 3K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by minitauros
Member Avatar for minitauros

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?

Member Avatar for nadiam

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

Member Avatar for minitauros

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');
Member Avatar for nadiam

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?

Edited by nadiam
Member Avatar for minitauros

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.

Member Avatar for nadiam

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?

Member Avatar for minitauros

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.