js动态生成table 合并单元格

最新推荐文章于 2024-05-19 11:54:04 发布

yyhm

最新推荐文章于 2024-05-19 11:54:04 发布

阅读量1w

点赞数

文章标签： table list border function 报表 class

本文链接：https://blog.csdn.net/yiyuhanmeng/article/details/7331782

版权

<html>
<head>
<title>js操作表格</title>
<style type="text/css">
.domian_tab { width:1000px; border:#000000 1px solid; border-collapse:collapse;}
</style>
<script type = 'text/javascript'>

var _columns = [
{name:'kpi_type',hidGrid:'true'},
{name:'kpi_type_name',idMerge:true},
{name:'kpi_seq'},
{name:'kpi_name'},
{name:'kpi_unit'},
{name:'kpi_value'},
{name:'kpi_desc',idMerge:true}
];

function init(){
var list = [
{kpi_type: '1', kpi_type_name: '积分客户数', kpi_seq: '1', kpi_name: '积分客户总数', kpi_unit: '户', kpi_value: '3824934', kpi_desc: '截止到统计期末有回馈积分且积分余额大于0的客户总数量'},
{kpi_type: '1', kpi_type_name: '积分客户数', kpi_seq: '2', kpi_name: '可兑换积分客户数', kpi_unit: '户', kpi_value: '3824934', kpi_desc: '截止到统计期末可以进行积分兑换的客户数'},
{kpi_type: '1', kpi_type_name: '积分客户数', kpi_seq: '3', kpi_name: '(0-999)分可兑换积分客户数', kpi_unit: '户', kpi_value: '3824934', kpi_desc: '截止到统计期末有回馈积分且积分余额大于0的客户总数量'},
{kpi_type: '1', kpi_type_name: '积分客户数', kpi_seq: '4', kpi_name: '(1000-4999)分可兑换积分客户数', kpi_unit: '户', kpi_value: '3824934', kpi_desc: '截止到统计期末有回馈积分且积分余额大于0的客户总数量'},
{kpi_type: '1', kpi_type_name: '积分客户数', kpi_seq: '5', kpi_name: '(5000-9999)分可兑换积分客户数', kpi_unit: '户', kpi_value: '3824934', kpi_desc: '截止到统计期末有回馈积分且积分余额大于0的客户总数量'},
{kpi_type: '1', kpi_type_name: '积分客户数', kpi_seq: '6', kpi_name: '(10000分以上)可兑换积分客户数', kpi_unit: '户', kpi_value: '3824934', kpi_desc: '截止到统计期末有回馈积分且积分余额大于0的客户总数量'},
{kpi_type: '2', kpi_type_name: '积分基础分值', kpi_seq: '7', kpi_name: '不可兑换积分客户数', kpi_unit: '户', kpi_value: '3824934', kpi_desc: '截止到统计期末不可以进行积分兑换行为的客户数'},
{kpi_type: '2', kpi_type_name: '积分基础分值', kpi_seq: '8', kpi_name: '0分以下不可兑换积分客户数', kpi_unit: '户', kpi_value: '3824934', kpi_desc: '截止到统计期末不可以进行积分兑换行为的客户数'},
{kpi_type: '3', kpi_type_name: '积分兑换情况', kpi_seq: '9', kpi_name: '活跃积分客户数', kpi_unit: '户', kpi_value: '3824934', kpi_desc: '在统计期内进行积分兑换的客户数'}
];
_table = document.getElementById("tbody");
_table.border = "1px";

var currMergeTds = [];
for(var i = 0; i < list.length; i++){
var row = document.createElement("tr");
for(var colIdx = 0; colIdx < _columns.length; colIdx++){
var col = _columns[colIdx];
if(col['hidGrid']){
continue;
}
if(col['idMerge']){
if(i > 0 && list[i][col['name']] === currMergeTds[colIdx]['value']){
currMergeTds[colIdx]['cell'].setAttribute('rowspan', ++currMergeTds[colIdx]['cell_count']);
}else{
var cell = document.createElement("TD");
cell.setAttribute('rowspan',1);
cell.innerHTML = list[i][col['name']];
var mergeTd = {};
mergeTd['value'] = list[i][col['name']];
mergeTd['cell'] = cell;
mergeTd['cell_count'] = 1;
currMergeTds[colIdx] = mergeTd;
row.appendChild(cell);
}
}else{
var cell = document.createElement("TD");
cell.innerHTML = list[i][col['name']];
row.appendChild(cell);
}
}

_table.appendChild(row);
document.body.appendChild(_table);
}
}
</script>
</head>
<body onLoad="init();">
<table align="center" class="domian_tab" id="tbody">
<thead>
<tr><th colspan = "6"><h2>积分俱乐部运营月报表</h2></th></tr>
<tr><th>指标分类</th><th>序号</th><th>指标名称</th><th>计量单位</th><th>指标数值</th><th>指标说明</th></tr>
</thead>
<tbody>

</tbody>
</table>
</body>
</html>

yyhm

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js动态生成table 合并单元格

js操作表格.domian_tab { width:1000px; border:#000000 1px solid; border-collapse:collapse;}var _columns = [{name:'kpi_type',hidGrid:'true'},{name:'kpi_type_name',idMerge:true},{name:'
复制链接

扫一扫