ansaurus

Question

Repeat/Clone a <tr> element using jQuery's clone() function

Answer 1

A:

for(var index in results){
        var result = results[index];
        $result_listing = $("#search_result_temp").clone().removeClass('template').attr('id', result.key);
        $search_results.append($result_listing);
    }

correct me if I'm wrong, but why do you need to

var result = results[index];

index is already a single element of results

drachenstern 2010-10-27 22:33:35

Not in javascript, index is just the index(label)

Dr.Molle 2010-10-27 22:35:43

@Dr.Molle ... no kidding, it doesn't work like other languages collections? How interesting. Then why not `for(i=0;i<results.count;i++)` ? Or is that the shorthand version of?

drachenstern 2010-10-27 22:39:23

In javascript the for loop iterates through the 'keys' of the object. So index refers to the key not the value. @drachenstern - Those loops have the same effect

Justin Lucas 2010-10-27 22:40:33

Its really not the same. use `for(i=0;i<arrArray.length;i++)` for arrays, and `for(var index in objObject)` for all objects except arrays. The second way could also return other members if used onto an array, for example **length**, that's the hook.

Dr.Molle 2010-10-27 22:52:13

Example: `Array.prototype.foo='bar';var arr=[1,2,3];for(var k in arr){alert(k);}`

Dr.Molle 2010-10-27 22:59:59

@Dr.Molle - That difference is good to know. Thanks. 'results' is an object literal as opposed to an array.

Justin Lucas 2010-10-27 23:06:37

@Dr.Molle ~ Thanks!

drachenstern 2010-10-28 13:56:03

Answer 2

+1 A:

Found the answer. The clone() function works fine when the template <tr> is encapsulated within <table> and <div> elements. As stated below .innerHTML (which jQuery uses in clone()) does not work with table fragments. That means jQuery will not clone a <tr> if it is a root element (whose parent element is <body>). Therefore, the template should look like this(of course with an appropriate id on the <div> to be selected by jQuery):

<div>
<table>
<tr id="search_result_temp" class="template">
<td class="logo">
    <img class="logo" />
</td>
<td class="ratings">
    <p id="rating"></p>
</td>
<td class="programs"></td>
<td class="actions">
    <button id="request_info">Request Info</button>
    <button id="save_school">Save</button>
</td>
<td class="compare"></td>
</tr>
</table>
</div>

Justin Lucas 2010-10-27 23:23:05

If you want to know why you have to do it this way, it is due to browser limitations in setting table fragments with `.innerHTML`

staticsan 2010-10-28 00:09:08

Answer 3

A:

Alternatively you can wrap the template in a hidden DIV and access the content via jQueries HTML method. On a side note, you might bump heads cloning several items with the same ID. Try use a class approach and add an identifier (Try the new HMTL5 data-* tag attribute).

Slappy 2010-10-28 02:12:23

ansaurus

tags:

views:

answers:

Repeat/Clone a <tr> element using jQuery's clone() function

related questions