js动态生成表格【含合并单元格的表格】

最近遇到需求，动态生成表格，类似Excel，支持合并单元格的表格，代码分享给大家~
一、网上找到的简单生成表格的例子：
以下是生成规则表格m行*n列类似，可以直接打开HTML查看结果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动态生成表格</title><script type="text/javascript"></script>
</head>
<body>
行:<input type="text" id="h"/>&nbsp;
列:<input type="text" id="l"/><br/>
<input type="button" value="生成" onclick="addTable();"/>
<div id="div1"></div>
<script type="text/javascript">function addTable() {var row1=document.getElementById("h").value;//获取属性值var col1=document.getElementById("l").value;//获取属性值var div1=document.getElementById("div1");var tab="<table border='1' bordercolor='blue' width='200' height='10'>";//循环行for(var i=1;i<=row1;i++){tab+="<tr>";//循环列for(var j=1;j<=col1;j++){tab+="<td>单元格j</td>";}tab+="</tr>";}tab+="</table>"div1.innerHTML=tab;}
</script>
</body>
</html>

二、生成合并单元格样式的表格，项目中遇到的，我是通过后台接口拼出json串来展现表格的，下面只显示页面的东东，后台暂时忽略：

//appendStr为表格HTML字符串，"rowspan": 1, "colspan": 1为合并单元格的参数
var appendStr ='<div class="dashedDiv" id=' + block.id + ' showorder='+block.showOrder+' style="width:100%;">'+ '<div class="row clearfix">'+ '<div class="col-md-8 column">'+ '<table class="columnTable table table-bordered">';
//json为js定义的一个json对象
var json = [{"rowindex": 0,"collist": [{"row_index": 0, "col_index": 0, "rowspan": 1, "colspan": 1,"correlation_value":"dfd"}, {"row_index": 0,"col_index": 1,"rowspan": 1,"colspan": 1, "correlation_value":"dfd"}, {"row_index": 0, "col_index": 2, "rowspan": 1, "colspan": 1,"correlation_value":"dfd"}]},{"rowindex": 1,"collist": [{"row_index": 1, "col_index": 0, "rowspan": 2, "colspan": 1,"correlation_value":"dfd"}, {"row_index": 1,"col_index": 1,"rowspan": 1,"colspan": 1,"correlation_value":"dfd"}, {"row_index": 1, "col_index": 2, "rowspan": 1, "colspan": 1,"correlation_value":"dfd"}]},{"rowindex": 2,"collist": [{"row_index": 2, "col_index": 1, "rowspan": 1, "colspan": 1,"correlation_value":"dfd"}, {"row_index": 2,"col_index": 2,"rowspan": 1,"colspan": 1,"correlation_value":"dfd"}]}];for (var i = 0; i < json.length; i++) {appendStr += "<tr>";//循环列for (var j = 0; j < json[i].colList.length; j++) {appendStr += "<td rowspan='" + json[i].colList[j].rowspan + "'>" + json[i].colList[j].correlationValue+ "</td>";}appendStr += "</tr>";}appendStr += '</table>'+ '     </div>'+ '     <div class="col-md-4 column">'+ '     </div>'+ ' </div>'+ '</div>';//div_content为页面div，存放table用$("#div_content").append(appendStr);

效果图如下：

—-第一次发博，大家可以多多沟通交流，提出宝贵意见哈~~~~~

js动态生成表格【含合并单元格的表格】相关推荐

vue + xlsx 动态生成Excel，合并单元格
根据数据动态生成一个Excel导出文件,这个公共相对简单一些,引入 xlsx就可以了. 但是根据需求,动态合并单元格,貌似难度不小,这里需要对 xlsx的属性和方法有一定的了解才可以,那么一起学习一下 ...
【PHPWord】基于Word模板替换生成输出表格动态生成内容、合并单元格、设置单元格背景颜色
文章目录一.前言二.业务需求三.功能实现 1.处理数据 2.Word模板 3.输出动态数据四.完整代码和模板 1.Word模板 2.完整代码五.总结一.前言在之前的文章中,我们做了直接生 ...
SpringBoot+Poi-tl根据Word模板动态生成word(含动态行表格、合并单元格)
本编文章继SpringBoot+Poi-tl根据Word模板动态生成word(含动态行表格)文章之后介绍Poi-tl导出word的延伸功能: 所需依赖以及word模板所属位置见 SpringBoo ...
layui table 表头合并_layui 动态表格之合并单元格
需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格 done : function(res, curr, count) ...
如何通过VB合并Excel单元格以及设置Excel行高？VB创建Excel表格，合并单元格，生成图形等操作
如何通过VB合并Excel单元格以及设置Excel行高? 例如:我想把第一列的第4,5,6,7行合并...我在怎样让合并单元格里的字居中,怎样改变字体. 请不吝赐教... ============== ...
word课程表设置符号与编号_用WORD设计一个课程表 ,标题使用艺术字生成 ,要包含合并单元格、边框、底纹、字体样式、背景图片,包含自己的学号和姓名。提交到锦城在线上。_学小易找答案...
[其它]课程论文要求: ( 1 )本课程的要点及重难点分析.( 200 字以上) ( 2 )对课程内容的小结和认识.( 300 字以上) ( 3 )对课程内容增.删或修改建议.(至少一条, 100 字 ...
python合并word表格单元格_python docx模块读取word表格遇到合并单元格时的处理
python docx模块读取word表格遇到合并单元格时的处理 python docx模块读取word表格遇到合并单元格时的处理 python docx模块读取word表遇到合并单元格时的处理通 ...
easyExcel导出表格及合并单元格
easyExcel导出表格及合并单元格前言废话不多说,直接上效果图. 效果图合并之前导出的: 合并之后导出的: 代码的实现主要是合并之后的,为了更好的分清数据之间的关系. 二.代码目录 < ...
html表格怎么纵向合并单元格,在html中表格如何合并单元格
在html中表格如何合并单元格发布时间:2020-04-28 10:55:12 来源:亿速云阅读:777 作者:小新这篇文章主要为大家详细介绍了在html中表格如何合并单元格,文中示例代码介绍的 ...

js动态生成表格【含合并单元格的表格】

js动态生成表格【含合并单元格的表格】相关推荐

最新文章

热门文章