使用jQuery添加表头和表尾 [英] Adding Table Header and Footer with Jquery
本文介绍了使用jQuery添加表头和表尾的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个组合框,它
- 生成数据
- 作为表格绑定到组合框
我想为多列组合框添加页眉和页脚,并尝试冻结页眉和页脚。请推荐
$.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);
});
推荐答案
$('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(''));
这篇关于使用jQuery添加表头和表尾的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文