dynamically add html element using jquery

Question

hi , based on the answer to my previous question by BlausC i am now able to use jquery to a certain extent. but now i need to add a checkbox control to the table created by jquery based on a postback from servlet. the code i am using is

 $("#linkInstr").click(function(){
   var arr=new Array();
   var cdid=$("#cboinstr option:selected");
    var code=$("#cbovendcode option:selected");
   $.get("trnDC?caseNo=21&insid="+cdid.text(),function(data){

      arr=data.split(",");
      var tbl= $("#tblDetails");
      $('<tr>').appendTo(tbl).append($('<td>'))
      .append($('<td>').text(code.val()))
      .append($('<td>').text(cdid.text()))
      .append($('<td>').text(arr[0]))
      .append($('<td>').text(arr[1]))
      .append($('<td>').text(arr[2]))
      ;

   })

})

any help will be greatly appreciated

Answer 1

Just append the markup for the checkbox where you need it. Note that calling append like that is unnecessary, take a look at this post for more information: 43,439 reasons to use append() correctly

Answer 2

I foudn a good tutorial where users have shown some JQuery plugin which you can play with. Though this is not a basic tutorial to help you to learn JQuery. But you can reuse the already developed code in your web project. See the link techcubetalk

Answer 3

Here's a better way that includes the checkbox and is much more efficient.

 $("#linkInstr").click(function(){

   var arr=new Array();
   var contents;

   var cdid=$("#cboinstr option:selected");
   var code=$("#cbovendcode option:selected");

   $.get("trnDC?caseNo=21&insid="+cdid.text(),function(data){
      arr=data.split(",");
      contents = '<tr><td><input type="checkbox" /></td><td>' + cdid.text() + '</td><td>' + arr[0] + '</td><td>' + arr[1] + '</td><td>' + arr[2] + '</td></tr>';

      $("#tblDetails").append(content);
   });
});