Question

Is it possible to append html before and after a JQuery.tmpl?

I would like to insert a nested table in

<table id="accTable">
  <tr class="row" id="12345">
  </tr>
  <!-- New row to be inserted here -->
</table>

so I have done

var dat = [];
$.each(result, function(key, value){
    dat.push({
    FROM: this.date,
    ID: key,
    });
});

var markup = "<tr> <td>${ID}</td> <td>${FROM}</td> </tr>";

$.template("actTemplate", markup);

$('#'+id).tmpl("actTemplate", dat).after('#'+id);

But somehow I need to append <tr><td><table> and prepend </table></td></tr>.

I have thought about adding that HTML to the existing, but it should happen in a button press, so until it is pressed would it look wrong. So I guess the append and prepend have to happen when the template is inserted…?

Any suggestions on how to solve this?

Update

In this jsFiffle will a row be added/removed when “Details” is clicked. This is the row that I would like to replace.

http://jsfiddle.net/littlesandra88/hhMM6/

Answer 1

You can make it this way:

EDITED

var wrapper = $( '<tr id="details"><td><table></table></td></tr>' );
var wrapperTable = wrapper.find( 'table' );
$.tmpl ("actTemplate", dat ).appendTo( wrapperTable  );

wrapper.insertAfter( '#'+id );