Kurkula Kurkula - 6 days ago 6
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>';
$(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
$('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(''));
Comments