dynamically add html element using jquery - jquery-selectors

Question

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

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);
});
});

Answer 2

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 3

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