添加表页眉和页脚与jQuery

Question

我有一个组合框，其

1. 生成数据
2. 结合组合框为表格

我要添加页眉和页脚的多列组合框，并试图冻结页眉和页脚。请建议

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