导航:首页 > 编程语言 > js生成列表

js生成列表

发布时间:2025-08-04 23:04:58

js如何导出exel文件

简单的办法:使用js生成一个table,可以直接复制到excel中,网上有很多表格插件。

复杂的办法:js传递数据到服务器,服务器生成表格后返回一个下载链接。

② JS动态生成Table

var _data = [
{'name': 'a','id': 'b1','sex': 'b', 'age': '1'},
{'name': 'a','id': 'b2','sex': 'g','age': '2'},
{'name': 'a','id': 'b3','sex': 'g','age': '3'},
{'name': 'a','id': 'b4','sex': 'b','age': '4' }
]

var UI = {};
UI.Grid = {};

function creatTable(current,o){
var table = document.createElement('table');
table.id = o.id;
table.style.cssText = 'width: 300px; height: 100px;border-collapse:collapse;border: 1px solid #DDDDDD;';

var thead = document.createElement('thead');
var th = document.createElement('tr');
th.style.width = '300px';
th.style.cssText = 'background: #ffffff';
var tbody = document.createElement('tbody');
tbody.style.cssText = 'border: 1px solid #DDDDDD;';

for(var i = 0 ; i < o.cloum.length ; i++){
var td = document.createElement('td');
td.style.width = '75px' ;
var span = document.createElement('span');
span.innerHTML = o.cloum[i].head;
span.style.lineHeight = '30px';
//span.style.fontFamily = '宋体';
span.style.fontSize = '25px';
td.appendChild(span);
td.style.textAlign = 'center';
th.appendChild(td);
}
thead.appendChild(th);

for( var j = 0 ; j < o.data.length ; j++){
var tr = document.createElement('tr');
//var att = getKeys(tr.attributes);
// console.info(att);
// console.info(tr.attributes);
// console.info(tr.attributes.length);
// tr.attributes.selected = false;
for(var i = 0 ; i < o.cloum.length ; i++){
var td = document.createElement('td');
var text = o.data[j][o.cloum[i].datafield] ; //应该有个加载function调用
td.innerHTML = text;
td.style.textAlign = 'center';
td.style.cssText = 'border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;text-align:center';
tr.appendChild(td);
}
tr.style.cssText = 'border-top: 1px solid #DDDDDD;';
tbody.appendChild(tr);
}
table.appendChild(thead);
table.appendChild(tbody);
current.appendChild(table);
};

$.fn.creatSth = function(o){
UI.Grid[o.id] = o ;
var current = this[0];
var table = document.createElement('table');
table.style.cssText = 'border-collapse:collapse;border: 1px solid #DDDDDD;';

//line 1
var tr1 = document.createElement('tr');
tr1.style.height = '8px';
var td11 = document.createElement('td');
td11.style.width = '8px';
var td12 = document.createElement('td');
var td13 = document.createElement('td');
td13.style.width = '8px';
tr1.appendChild(td11);
tr1.appendChild(td12);
tr1.appendChild(td13);

// toolbar - line
var trbar = document.createElement('tr');
trbar.style.height = '15px';
var tdbar1 = document.createElement('td');
var tdbar2 = document.createElement('td');
var tdbar3 = document.createElement('td');
tdbar2.innerHTML = '123123';
trbar.appendChild(tdbar1);
trbar.appendChild(tdbar2);
trbar.appendChild(tdbar3);

//line 2
var tr2 = document.createElement('tr');
var td21 = document.createElement('td');
td21.style.width = '8px';
var td22 = document.createElement('td');
creatTable(td22,o);
var td23 = document.createElement('td');
td23.style.width = '8px';
tr2.appendChild(td21);
tr2.appendChild(td22);
tr2.appendChild(td23);

//line 3
var tr3 = document.createElement('tr');
tr3.style.height = '8px';
var td31 = document.createElement('td');
td31.style.width = '8px';
var td32 = document.createElement('td');
var td33 = document.createElement('td');
td33.style.width = '8px';
tr3.appendChild(td31);
tr3.appendChild(td32);
tr3.appendChild(td33);

table.appendChild(tr1);
if(o.tbar){
table.appendChild(trbar);
}
table.appendChild(tr2);
table.appendChild(tr3);
current.appendChild(table);
};

$('#test').creatSth({
id:'tb1',
cloum:[
{head:'name',datafield:'name'},
{head:'id',datafield:'id'},
{head:'sex',datafield:'sex'},
{head:'age',datafield:'age'}
],
data:_data
});
//获取jsonObject的key值
function getKeys(o){
var keys = [];
for(key in o){
keys.push(key);
}
return keys;
}

这个是用JS和jquery写的简单的JS表格,自己试试看吧

阅读全文

与js生成列表相关的资料

热点内容
word2003修改批注人 浏览:445
网络的规模是如何扩大的 浏览:381
资料文件夹单价多少 浏览:813
newfilejava 浏览:681
怎么卸载天猫精灵里的app 浏览:544
苹果电脑win7修复漏洞后内存 浏览:850
怎么压缩几个文件夹 浏览:30
usb痕迹深度清理工具 浏览:614
有信账号密码分钟享用 浏览:176
选定的外部参照参照了早期的图形文件格式 浏览:323
苹果官方网站是什么 浏览:727
linux共享文件夹看不到文件 浏览:56
wos的数据分析在哪里 浏览:338
pq从文件夹 浏览:545
苹果13原装数据线支持多少w 浏览:403
织梦cms数据库说明 浏览:484
男人好难说唱版本 浏览:725
小姐的qq 浏览:900
java100万100最大选出 浏览:595
js中包含数字 浏览:476

友情链接