Repeat/Clone a <tr> element using jQuery's clone() function
I am trying to clone a template of a which will be populated with data and then inserted into a table. I'm currently able to use the same .clone() function with other 开发者_JAVA技巧elements on the same page but jQuery refuses to see and clone the template (I'm guessing because its not a block element).
Here is the template:
<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>
Here is the javascript code:
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);
}
Thanks!
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>
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
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).
加载中,请稍侯......
精彩评论