JavaScript生成带有缩进的表格代码

2024-10-21 16:41:03

最近做了个用户管理系统，其中有项目需求，要求用js生成带有缩进的表格，真是把我难住了，通过查阅相关资料，才实现此功能，下面小编把实现代码做个笔记，也方便以后查找，同时也希望能与我同样需求的朋友可以做个参考，如有更好的方法，留言给我，谢谢！

js做如下表格：

json

[{"id":302,"serviceId":15,"name":"data","type":"JsonObject","paramDesc":"返回查询信息","value":"","comment":"","parentId":-1,"childrenParam":[{"id":305,"serviceId":15,"name":"info","type":"JsonObject","paramDesc":"查询内容","value":"","comment":"","parentId":302,"childrenParam":[{"id":312,"serviceId":15,"name":"entInvList","type":"List","paramDesc":"企业对外投资情况","value":"","comment":"","parentId":305,"childrenParam":[{"id":343,"serviceId":15,"name":"regNo","type":"String","paramDesc":"注册号","value":"","comment":"","parentId":312,"childrenParam":null},{"id":342,"serviceId":15,"name":"regCapCur","type":"String","paramDesc":"注册资本币种","value":"","comment":"","parentId":312,"childrenParam":null},{"id":341,"serviceId":15,"name":"regCap","type":"String","paramDesc":"注册资本(万元)","value":"","comment":"","parentId":312,"childrenParam":null},{"id":340,"serviceId":15,"name":"ent_name","type":"String","paramDesc":"法定代表人姓名","value":"","comment":"","parentId":312,"childrenParam":null},{"id":339,"serviceId":15,"name":"fundedRatio","type":"String","paramDesc":"出资比例","value":"","comment":"","parentId":312,"childrenParam":null},{"id":338,"serviceId":15,"name":"esDate","type":"String","paramDesc":"开业日期","value":"","comment":"","parentId":312,"childrenParam":null},{"id":337,"serviceId":15,"name":"error","type":"String","paramDesc":"认缴出资额(万元)","value":"","comment":"","parentId":312,"childrenParam":null},{"id":336,"serviceId":15,"name":"entType","type":"String","paramDesc":"企业(机构)类型","value":"","comment":"","parentId":312,"childrenParam":null},{"id":345,"serviceId":15,"name":"revDate","type":"String","paramDesc":"吊销日期","value":"","comment":"","parentId":312,"childrenParam":null},{"id":344,"serviceId":15,"name":"regOrg","type":"String","paramDesc":"登记机关","value":"","comment":"","parentId":312,"childrenParam":null},{"id":334,"serviceId":15,"name":"currency","type":"String","paramDesc":"认缴出资币种","value":"","comment":"","parentId":312,"childrenParam":null},{"id":335,"serviceId":15,"name":"entStatus","type":"String","paramDesc":"企业状态","value":"","comment":"","parentId":312,"childrenParam":null},{"id":333,"serviceId":15,"name":"canDate","type":"String","paramDesc":"注销日期","value":"","comment":"","parentId":312,"childrenParam":null}]},{"id":346,"serviceId":15,"name":"ent_name","type":"String","paramDesc":"企业名称","value":"","comment":"","parentId":305,"childrenParam":null},{"id":311,"serviceId":15,"name":"basic","type":"JsonObject","paramDesc":"企业基本信息","value":"","comment":"","parentId":305,"childrenParam":[{"id":326,"serviceId":15,"name":"opScope","type":"String","paramDesc":"经营(业务)范围","value":"","comment":"","parentId":311,"childrenParam":null},{"id":327,"serviceId":15,"name":"opTo","type":"String","paramDesc":"经营期限至 YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":324,"serviceId":15,"name":"industryPhy","type":"String","paramDesc":"国民经济行业代码","value":"","comment":"","parentId":311,"childrenParam":null},{"id":325,"serviceId":15,"name":"opFrom","type":"String","paramDesc":"经营期限自 YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":322,"serviceId":15,"name":"frName","type":"String","paramDesc":"定代表人姓名 企业为法定代表人姓名，个体户为负责人姓","value":"","comment":"","parentId":311,"childrenParam":null},{"id":323,"serviceId":15,"name":"industryCo","type":"String","paramDesc":"行业门类代码","value":"","comment":"","parentId":311,"childrenParam":null},{"id":320,"serviceId":15,"name":"entType","type":"String","paramDesc":"企业(机构)类型 有限责任公司等","value":"","comment":"","parentId":311,"childrenParam":null},{"id":321,"serviceId":15,"name":"esDate","type":"String","paramDesc":"开业日期 YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":332,"serviceId":15,"name":"revDate","type":"String","paramDesc":"吊销日期 YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":330,"serviceId":15,"name":"regNo","type":"String","paramDesc":"注册号","value":"","comment":"","parentId":311,"childrenParam":null},{"id":331,"serviceId":15,"name":"regOrg","type":"String","paramDesc":"登记机关","value":"","comment":"","parentId":311,"childrenParam":null},{"id":328,"serviceId":15,"name":"regCap","type":"String","paramDesc":"注册资本 单位：万元","value":"","comment":"","parentId":311,"childrenParam":null},{"id":329,"serviceId":15,"name":"regCapCur","type":"String","paramDesc":"币种 人民币、美元等","value":"","comment":"","parentId":311,"childrenParam":null},{"id":313,"serviceId":15,"name":"OPSCOANDFORM","type":"String","paramDesc":"经营(业务)范围及方式","value":"","comment":"","parentId":311,"childrenParam":null},{"id":315,"serviceId":15,"name":"ancheYear","type":"String","paramDesc":"最后年检年度 YYYY ","value":"","comment":"","parentId":311,"childrenParam":null},{"id":314,"serviceId":15,"name":"abuItem","type":"String","paramDesc":"许可经营项目","value":"","comment":"","parentId":311,"childrenParam":null},{"id":317,"serviceId":15,"name":"cbuItem","type":"String","paramDesc":"一般经营项目","value":"","comment":"","parentId":311,"childrenParam":null},{"id":316,"serviceId":15,"name":"canDate","type":"String","paramDesc":"注销日期 YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":319,"serviceId":15,"name":"entStatus","type":"String","paramDesc":"经营状态 在营、吊销、注销、其他","value":"","comment":"","parentId":311,"childrenParam":null},{"id":318,"serviceId":15,"name":"dom","type":"String","paramDesc":"住址","value":"","comment":"","parentId":311,"childrenParam":null}]}]},{"id":304,"serviceId":15,"name":"result","type":"String","paramDesc":"核查结果","value":"match| not_match| not_found","comment":"","parentId":302,"childrenParam":null},{"id":303,"serviceId":15,"name":"status","type":"Boolean","paramDesc":"接口返回状态","value":"","comment":"","parentId":302,"childrenParam":null}]},{"id":306,"serviceId":15,"name":"api_status","type":"JsonObject","paramDesc":"返回状态码","value":"","comment":"","parentId":-1,"childrenParam":[{"id":307,"serviceId":15,"name":"status","type":"Boolean","paramDesc":"接口返回状态","value":"","comment":"","parentId":306,"childrenParam":null},{"id":309,"serviceId":15,"name":"description","type":"String","paramDesc":"返回状态描述","value":"","comment":"","parentId":306,"childrenParam":null},{"id":308,"serviceId":15,"name":"code","type":"String","paramDesc":"状态码","value":"","comment":"","parentId":306,"childrenParam":null},{"id":310,"serviceId":15,"name":"serial_no","type":"String","paramDesc":"流水号","value":"","comment":"","parentId":306,"childrenParam":null}]}]

// api页面 输出参数说明
var APItoHTML_outParamFn = function(json,returnExample){
var html=''
var mustArr = ['必填','选填']
var paramHtml = ''
var data = $.parseJSON(json);
console.log(data)
// name：参数英文名
// type：参数类型
// paramDesc：参数中文释义
// value：参数赋值说明
// comment：参数其它说明
// childrenParam：子参数列表
console.log('-------------------------------------------------------------')
var flagI = 0
var bbb = []
var c=[]
dataFormatFn2(data,flagI)
// 统计子类数量
// 每个节点增加len属性，统计所以子节点和子节点的子节点的总和
function dataFormatFn2(data){
for (var i = 0; i < data.length; i++) {
bbb[i]=0
bbb[i]=dataFormatFn(data[i],0,bbb[i],c )
};
// data转html
paramHtml = jsontohtml(data,0);
}
function dataFormatFn(data,flagI,b,c){
data.len = (data.childrenParam && data.childrenParam.length)||1
// debugger
// console.log(data)
c = c||[]
if(data.childrenParam){
for (var i = 0; i < data.childrenParam.length; i++) {
b++
data.len += dataFormatFn(data.childrenParam[i], flagI+1,b ,c[i])
};
return data.len
}else{
return (data.childrenParam && data.childrenParam.length) ||0
}
}
console.log(bbb)
console.log(data)
var flagI = 0
// 移动到 dataformataFn2 后执行
// paramHtml = jsontohtml(data,flagI);
function jsontohtml(data,flagI,len){
var paramHtml='';
var nbspArr =['','<b> Ⅰ</b>','<b>  Ⅱ</b>','<b>   Ⅲ</b>','<b>    Ⅵ</b>','<b>     Ⅴ</b>','<b>     Ⅵ</b>','<b>     Ⅶ</b>','<b>     Ⅷ</b>','<b>     Ⅸ</b>','<b>     Ⅹ</b>']
for(var i=0;i<data.length;i++){
var str2 = ''
var span = 1
if( i==0 && flagI>0 && len>1){
span = (10-flagI)
str2 = '<td class="" rowspan="'+ (len) +'"></td>'
}else{
span = (10-flagI)
}
paramHtml += '<tr class="">\
'+ str2 +'\
<td class="" colspan="'+ span +'"><nobr>'+ nbspArr[flagI] + data[i].name +'</nobr></td>\
<td>'+ data[i].type +' </td>\
<td>'+ data[i].paramDesc +' </td>\
<td>'+ data[i].value +' </td>\
<td>'+ data[i].comment +' </td>\
</tr>'
if(data[i].childrenParam){
paramHtml += jsontohtml(data[i].childrenParam,flagI+1,data[i].len)
}else{
flagI
}
}
return paramHtml
}
console.log('-------------------------------------------------------------')
html = '<dt class="col-sm-2 text-right">输出参数</dt>\
<dd class="col-sm-10">\
<div class="table-responsive">\
<table class="table table-bordered table-striped">\
<thead>\
<tr>\
<th colspan="10"><nobr>参数英文名</nobr></th>\
<th><nobr>参数类型</nobr></th>\
<th><nobr>参数中文释义</nobr></th>\
<th><nobr>参数赋值说明</nobr></th>\
<th><nobr>其它说明</nobr></th>\
</tr>\
</thead>\
<tbody>\
'+ paramHtml +'\
</tbody>\
</table>\
</div>\
</dd>'
$('#outParam dl').html(html);
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js生成有缩进的表格</title>
</head>
<body>
<div id="outParam">
<dl ></dl>
</div>
</body>
</html> 

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js生成有缩进的表格</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div id="outParam">
<dl ></dl>
</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
var json='[{"id":302,"serviceId":15,"name":"data","type":"JsonObject","paramDesc":"返回查询信息","value":"","comment":"","parentId":-1,"childrenParam":[{"id":305,"serviceId":15,"name":"info","type":"JsonObject","paramDesc":"查询内容","value":"","comment":"","parentId":302,"childrenParam":[{"id":312,"serviceId":15,"name":"entInvList","type":"List","paramDesc":"企业对外投资情况","value":"","comment":"","parentId":305,"childrenParam":[{"id":343,"serviceId":15,"name":"regNo","type":"String","paramDesc":"注册号","value":"","comment":"","parentId":312,"childrenParam":null},{"id":342,"serviceId":15,"name":"regCapCur","type":"String","paramDesc":"注册资本币种","value":"","comment":"","parentId":312,"childrenParam":null},{"id":341,"serviceId":15,"name":"regCap","type":"String","paramDesc":"注册资本(万元)","value":"","comment":"","parentId":312,"childrenParam":null},{"id":340,"serviceId":15,"name":"ent_name","type":"String","paramDesc":"法定代表人姓名","value":"","comment":"","parentId":312,"childrenParam":null},{"id":339,"serviceId":15,"name":"fundedRatio","type":"String","paramDesc":"出资比例","value":"","comment":"","parentId":312,"childrenParam":null},{"id":338,"serviceId":15,"name":"esDate","type":"String","paramDesc":"开业日期","value":"","comment":"","parentId":312,"childrenParam":null},{"id":337,"serviceId":15,"name":"error","type":"String","paramDesc":"认缴出资额(万元)","value":"","comment":"","parentId":312,"childrenParam":null},{"id":336,"serviceId":15,"name":"entType","type":"String","paramDesc":"企业(机构)类型","value":"","comment":"","parentId":312,"childrenParam":null},{"id":345,"serviceId":15,"name":"revDate","type":"String","paramDesc":"吊销日期","value":"","comment":"","parentId":312,"childrenParam":null},{"id":344,"serviceId":15,"name":"regOrg","type":"String","paramDesc":"登记机关","value":"","comment":"","parentId":312,"childrenParam":null},{"id":334,"serviceId":15,"name":"currency","type":"String","paramDesc":"认缴出资币种","value":"","comment":"","parentId":312,"childrenParam":null},{"id":335,"serviceId":15,"name":"entStatus","type":"String","paramDesc":"企业状态","value":"","comment":"","parentId":312,"childrenParam":null},{"id":333,"serviceId":15,"name":"canDate","type":"String","paramDesc":"注销日期","value":"","comment":"","parentId":312,"childrenParam":null}]},{"id":346,"serviceId":15,"name":"ent_name","type":"String","paramDesc":"企业名称","value":"","comment":"","parentId":305,"childrenParam":null},{"id":311,"serviceId":15,"name":"basic","type":"JsonObject","paramDesc":"企业基本信息","value":"","comment":"","parentId":305,"childrenParam":[{"id":326,"serviceId":15,"name":"opScope","type":"String","paramDesc":"经营(业务)范围","value":"","comment":"","parentId":311,"childrenParam":null},{"id":327,"serviceId":15,"name":"opTo","type":"String","paramDesc":"经营期限至 YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":324,"serviceId":15,"name":"industryPhy","type":"String","paramDesc":"国民经济行业代码","value":"","comment":"","parentId":311,"childrenParam":null},{"id":325,"serviceId":15,"name":"opFrom","type":"String","paramDesc":"经营期限自 YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":322,"serviceId":15,"name":"frName","type":"String","paramDesc":"定代表人姓名 企业为法定代表人姓名，个体户为负责人姓","value":"","comment":"","parentId":311,"childrenParam":null},{"id":323,"serviceId":15,"name":"industryCo","type":"String","paramDesc":"行业门类代码","value":"","comment":"","parentId":311,"childrenParam":null},{"id":320,"serviceId":15,"name":"entType","type":"String","paramDesc":"企业(机构)类型 有限责任公司等","value":"","comment":"","parentId":311,"childrenParam":null},{"id":321,"serviceId":15,"name":"esDate","type":"String","paramDesc":"开业日期 YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":332,"serviceId":15,"name":"revDate","type":"String","paramDesc":"吊销日期 YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":330,"serviceId":15,"name":"regNo","type":"String","paramDesc":"注册号","value":"","comment":"","parentId":311,"childrenParam":null},{"id":331,"serviceId":15,"name":"regOrg","type":"String","paramDesc":"登记机关","value":"","comment":"","parentId":311,"childrenParam":null},{"id":328,"serviceId":15,"name":"regCap","type":"String","paramDesc":"注册资本 单位：万元","value":"","comment":"","parentId":311,"childrenParam":null},{"id":329,"serviceId":15,"name":"regCapCur","type":"String","paramDesc":"币种 人民币、美元等","value":"","comment":"","parentId":311,"childrenParam":null},{"id":313,"serviceId":15,"name":"OPSCOANDFORM","type":"String","paramDesc":"经营(业务)范围及方式","value":"","comment":"","parentId":311,"childrenParam":null},{"id":315,"serviceId":15,"name":"ancheYear","type":"String","paramDesc":"最后年检年度 YYYY ","value":"","comment":"","parentId":311,"childrenParam":null},{"id":314,"serviceId":15,"name":"abuItem","type":"String","paramDesc":"许可经营项目","value":"","comment":"","parentId":311,"childrenParam":null},{"id":317,"serviceId":15,"name":"cbuItem","type":"String","paramDesc":"一般经营项目","value":"","comment":"","parentId":311,"childrenParam":null},{"id":316,"serviceId":15,"name":"canDate","type":"String","paramDesc":"注销日期 YYYY-MM-DD","value":"","comment":"","parentId":311,"childrenParam":null},{"id":319,"serviceId":15,"name":"entStatus","type":"String","paramDesc":"经营状态 在营、吊销、注销、其他","value":"","comment":"","parentId":311,"childrenParam":null},{"id":318,"serviceId":15,"name":"dom","type":"String","paramDesc":"住址","value":"","comment":"","parentId":311,"childrenParam":null}]}]},{"id":304,"serviceId":15,"name":"result","type":"String","paramDesc":"核查结果","value":"match| not_match| not_found","comment":"","parentId":302,"childrenParam":null},{"id":303,"serviceId":15,"name":"status","type":"Boolean","paramDesc":"接口返回状态","value":"","comment":"","parentId":302,"childrenParam":null}]},{"id":306,"serviceId":15,"name":"api_status","type":"JsonObject","paramDesc":"返回状态码","value":"","comment":"","parentId":-1,"childrenParam":[{"id":307,"serviceId":15,"name":"status","type":"Boolean","paramDesc":"接口返回状态","value":"","comment":"","parentId":306,"childrenParam":null},{"id":309,"serviceId":15,"name":"description","type":"String","paramDesc":"返回状态描述","value":"","comment":"","parentId":306,"childrenParam":null},{"id":308,"serviceId":15,"name":"code","type":"String","paramDesc":"状态码","value":"","comment":"","parentId":306,"childrenParam":null},{"id":310,"serviceId":15,"name":"serial_no","type":"String","paramDesc":"流水号","value":"","comment":"","parentId":306,"childrenParam":null}]}]';
// api页面 输出参数说明
var APItoHTML_outParamFn = function(json){
var html=''
var mustArr = ['必填','选填']
var paramHtml = ''
var data = $.parseJSON(json);
console.log(data)
// name：参数英文名
// type：参数类型
// paramDesc：参数中文释义
// value：参数赋值说明
// comment：参数其它说明
// childrenParam：子参数列表
console.log('-------------------------------------------------------------')
var flagI = 0
var bbb = []
var c=[]
dataFormatFn2(data,flagI)
// 统计子类数量
// 每个节点增加len属性，统计所以子节点和子节点的子节点的总和
function dataFormatFn2(data){
for (var i = 0; i < data.length; i++) {
bbb[i]=0
bbb[i]=dataFormatFn(data[i],0,bbb[i],c )
};
// data转html
paramHtml = jsontohtml(data,0);
}
function dataFormatFn(data,flagI,b,c){
data.len = (data.childrenParam && data.childrenParam.length)||1
// debugger
// console.log(data)
c = c||[]
if(data.childrenParam){
for (var i = 0; i < data.childrenParam.length; i++) {
b++
data.len += dataFormatFn(data.childrenParam[i], flagI+1,b ,c[i])
};
return data.len
}else{
return (data.childrenParam && data.childrenParam.length) ||0
}
}
console.log(bbb)
console.log(data)
var flagI = 0
// 移动到 dataformataFn2 后执行
// paramHtml = jsontohtml(data,flagI);
function jsontohtml(data,flagI,len){
var paramHtml='';
var nbspArr =['','<b> Ⅰ</b>','<b>  Ⅱ</b>','<b>   Ⅲ</b>','<b>    Ⅵ</b>','<b>     Ⅴ</b>','<b>     Ⅵ</b>','<b>     Ⅶ</b>','<b>     Ⅷ</b>','<b>     Ⅸ</b>','<b>     Ⅹ</b>']
for(var i=0;i<data.length;i++){
var str2 = ''
var span = 1
if( i==0 && flagI>0 && len>1){
span = (10-flagI)
str2 = '<td class="" rowspan="'+ (len) +'"></td>'
}else{
span = (10-flagI)
}
paramHtml += '<tr class="">\
'+ str2 +'\
<td class="" colspan="'+ span +'"><nobr>'+ nbspArr[flagI] + data[i].name +'</nobr></td>\
<td>'+ data[i].type +' </td>\
<td>'+ data[i].paramDesc +' </td>\
<td>'+ data[i].value +' </td>\
<td>'+ data[i].comment +' </td>\
</tr>'
if(data[i].childrenParam){
paramHtml += jsontohtml(data[i].childrenParam,flagI+1,data[i].len)
}else{
flagI
}
}
return paramHtml
}
console.log('-------------------------------------------------------------')
html = '<dt class="col-sm-2 text-right">输出参数</dt>\
<dd class="col-sm-10">\
<div class="table-responsive">\
<table class="table table-bordered table-striped">\
<thead>\
<tr>\
<th colspan="10"><nobr>参数英文名</nobr></th>\
<th><nobr>参数类型</nobr></th>\
<th><nobr>参数中文释义</nobr></th>\
<th><nobr>参数赋值说明</nobr></th>\
<th><nobr>其它说明</nobr></th>\
</tr>\
</thead>\
<tbody>\
'+ paramHtml +'\
</tbody>\
</table>\
</div>\
</dd>'
$('#outParam dl').html(html);
}
APItoHTML_outParamFn(json)
</script>
</body>
</html>

使用angularjs创建简单表格

初步接手人生的第一个项目,需要用angularjs制作表格和实现各种功能,因此遇到了各种问题和以前不熟悉的知识点,在此记录下来,以供大家学习交流,解决方式可能并不完善或符合规范,如果大家有更好的方式欢迎指出,由于这个表格功能的制作是一点点添加上去的,因此我也分成几个部分介绍,日后如增加了新的功能也会不时更新的首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQuery的方法,在测试时需自行引入bootstrap,angularjs和jq的文件. 正文
angularjs表格ng-table使用备忘录

项目中用到angularjs的表格ng-table,功能相当强大,像搜索.排序.checkbox.分页.每页表格显示数目等都有.API,demo什么的也只能参考官网了.这里做个备忘,哪天肯定还会用到. HTML: <!DOCTYPE html> <html> <meta charset="utf-8"/> <head> <script data-require="angular.js@*" data-semver
JS实现动态生成表格并提交表格数据向后端

本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码,分享给大家供大家参考,具体内容如下先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. <script src="../js/jqui/jquery/jquery-1.5.2.min.js" type="text/javascript"></
angularjs表格分页功能详解

接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的. <div class="pagination"> <ul style="float:right"> <li id="previous"><a href=""
JavaScript生成带有缩进的表格代码

最近做了个用户管理系统,其中有项目需求,要求用js生成带有缩进的表格,真是把我难住了,通过查阅相关资料,才实现此功能,下面小编把实现代码做个笔记,也方便以后查找,同时也希望能与我同样需求的朋友可以做个参考,如有更好的方法,留言给我,谢谢! js做如下表格: json [{"id":302,"serviceId":15,"name":"data","type":"JsonObject",&
使用JavaScript生成罗马字符的实例代码

生成罗马数字这样生成有问题,到了 12 之后就不规律了 roman() { return new Array(30).fill('Ⅰ').map((lastLetter, i) => { return String.fromCharCode(lastLetter.charCodeAt(0) + i) }) } 下面这个正确的姿势 var data = { ↈ: 100000, ↂↈ: 90000, ↇ: 50000, ↂↇ: 40000, ↂ: 10000, Ⅿↂ: 9000, ↁ: 5000
JavaScript生成.xls文件的代码

贴代码,一切尽在注释中 <html> <head> <meta charset="utf-8"> </head> <body> <input type="button" value="下载设备模板" onclick="foo;" /> <script type="text/javascript" language="ja
java前端javascript生成动态表格示例演示

目录前言案例分析代码动图演示结语前言动态生成表格是前端开发中非常重要的内容,常常是后端返回数据(大多是json类型),我们前端通过js循环来动态添加,所以这部分内容是十分重要的,今天我就来写写这部分内容,其实也很简单的,仔细看哦!!! 案例分析因为里面的学生数据都是动态的,我们需要 js 动态生成.这里我们模拟数据,自己定义好数据.数据我们采取对象形式存储.所有的数据都是放到 tbody 里面的行里面.因为行很多,我们需要循环创建多个行(对应多少人). 代码 <!DOCTYPE
python生成带有表格的图片实例

因为工作中需要,需要生成一个带表格的图片例如: 直接在html中写一个table标签,然后单独把表格部分保存成图片或者是直接将excel中的内容保存成一个图片刚开始的思路,是直接生成一个带有table标签的html文件,然后将这个文件转成图片,经过查找资料发现需要安装webkit2png,而这个库又依赖其他的东西,遂放弃. 当初的目标是直接生成一个图片,并且是只需要安装python依赖库就行,而不需要在系统层面安装相应的依赖包后来考虑使用Python的图片处理库Pillow,和生成表格式
基于JavaScript实现动态添加删除表格的行

又一个动态控制表格的效果,用JavaScript动态生成表格行.表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能. 1.jsp <table id="viewTabs"> <thead> <tr> <th>产品名称</th> <th>编号</th> <th>数量</th> <th>重量</th> <t
JS控制网页动态生成任意行列数表格的方法

本文实例讲述了JS控制网页动态生成任意行列数表格的方法.分享给大家供大家参考.具体分析如下: 这是一个非常简单使用的JS在线生成表格的代码效果通过JS功能代码,直接输入行数和列数就可以自动生成你需要的表格当然你也可以扩展JS代码实现生成文字的各种形式复制代码代码如下: <html> <head> <title>Js动态生成表格</title> <style type="text/css"> table{font-siz
jquery canvas生成带有二维码的海报

本文实例为大家分享了jquery canvas生成带有二维码海报的具体代码,供大家参考,具体内容如下需求:点击图片弹窗生成带有二维码的海报. 遇到相关问题: 1.生成的图片会模糊.不清晰. 2. 苹果手机和安卓手机文字位置和字体大小有差异. 引入所需要的文件 //jquery.js <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js&qu
JavaScript生成随机字符串的方法

本文实例讲述了JavaScript生成随机字符串的方法.分享给大家供大家参考.具体分析如下: 这里使用JavaScript生成一个随机字符串,可以指定字符串的长度. 复制代码代码如下: function RandomString(length) { var str = ''; for ( ; str.length < length; str += Math.random().toString(36).substr(2) ); return str.substr(0, l
JavaScript生成验证码并实现验证功能

废话不多说了,直接给大家贴代码了,具体代码如下所示: <html> <head> <title>验证码</title> <style type="text/css"> #code { font-family:Arial; font-style:italic; font-weight:bold; border:0; letter-spacing:2px; color:blue; } </style> <scri

JavaScript生成带有缩进的表格代码

相关推荐

随机推荐