Cloning issue
Cloning issue
Hi
I need to create a tabel with data represented from another area on my page. What i have is two ul which represents the data structure. I want to clone the data and reinsert thÃs into a table when the user click a button.
I cannot know how many ul my customer will insert. So here is a sample of my data structure
-
<div class="relatedProductGroups">
<ul>
<li class="groupName"><a class="expand" href="">Groupname a</a>
<ul>
<li>
<a href="">Product1</a>
</li>
<li>
<a href="">Product2</a>
</li>
<ul>
<div>
<div class="relatedProductGroups">
<ul>
<li class="groupName"><a class="expand" href="">Groupname b</a>
<ul>
<li>
<a href="">Product3</a>
</li>
<li>
<a href="">Product1</a>
</li>
<ul>
<div>
Now what i want is upon a button click is to create a table.
Clone the data insert the class groupname into th's
Clone the product li´s and make a reference to what parent li they belonged to and the sorting them alphabetically and finally outputting them together with how many th there is in the table and referering them with a class to their respective th. The same productname can occur several times.
-
<table>
<tr>
<th><th>
<th>Groupname a<th>
<th>Groupname b</th>
<tr>
<tr>
<td>product1</td>
<td class "IbelongtoGroupnameA">
<td class="IAlsobelongtoGroupnameB">
</tr>
<tr>
<td>Product2</td>
<td class="IonlybelongtogroupA">
<td></td>
</tr>
<tr>
<td>Product3</td>
<td></td>
<td class="IonlybelongtogroupB"></td>
</tr>
Can anyone help me how to solve this. It is not difficult to clone object but i do not know how to loop ane evaluate the products (li)