Adding Table Header and Footer with Jquery

Question

I have a combo box which

1. generates data
2. bind to combo box as tables

I want to add header and footer for the multi column combobox and also trying to freeze header and footer. Please suggest

     $.each(ctrl.dropDown.$items, function (idx, item) {
            var header = '<thead><tr><td>Account Name</td><td>Account Number</td><td>Agreement Number</td></tr></thead>';

            var footer = '<tr><td colspan=3>'+idx+' items</td></tr>';
            $(item).empty();
            if (idx == 0) {
                $(item).prepend(header);
            }
            var tr = $('<tr/>');
            $.each(e.displayFields, function (dfdx, displayField) {
                var $td = $('<td/>').text(e.data[idx][displayField.fieldName]);
                //alert(e.data[idx][displayField.fieldName]);
                if (displayField.style != undefined) {
                    $td.attr('style', displayField.style);
                }
                $td.css('white-space', 'nowrap');
                tr.append($td);
            });
            var table = $('<table/>')   
                .attr({
                    'id':'tblComboList',
                    'cellpadding': '0px',
                    'cellspacing': '0px',
                    'width':'319px'
                });

            table.append(tr);
            if(idx ==0){
                table.prepend(header); //adding header but it is not freezed above table
            }
            $(item).append(table);
        });

Answer 1

$('body').empty();

var tempDataMain = [];
tempDataMain.push($('<div />').append($('<table />').attr({ 'id': 'tblComboList', 'cellpadding': '0px', 'cellspacing': '0px', 'width': '319px' })).html());
tempDataMain.push('<thead><tr><td>Account Name</td><td>Account Number</td><td>Agreement Number</td></tr></thead>');
tempDataMain.push('<tbody>');

$.each(ctrl.dropDown.$items, function (i, item) {
    //tempDataMain.push('<tr><td colspan="3">' + i + ' items</td></tr>');

    var $tr = $('<tr/>');
    $.each(e.displayFields, function (j, displayField) {
        var $td = $('<td/>').text(e.data[i][displayField.fieldName]);

        if (displayField.style != undefined && displayField.style != null) {
            $td.attr('style', displayField.style);
        }
        $tr.append($td.css('white-space', 'nowrap'));
    });

    tempDataMain.push($('<div />').append($tr).html());
});

tempDataMain.push('</tbody>');
tempDataMain.push('</table>');

$('body').append(tempDataMain.join(''));