Kurkula Kurkula - 2 years ago 122
jQuery Question

Adding Table Header and Footer with Jquery

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>';
if (idx == 0) {
var tr = $('<tr/>');
$.each(e.displayFields, function (dfdx, displayField) {
var $td = $('<td/>').text(e.data[idx][displayField.fieldName]);
if (displayField.style != undefined) {
$td.attr('style', displayField.style);
$td.css('white-space', 'nowrap');
var table = $('<table/>')
'cellpadding': '0px',
'cellspacing': '0px',

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

Answer Source

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

$.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());


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download