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

 更新时间:2016年06月15日 10:36:12   作者:cssfirefly  
这篇文章主要介绍了JavaScript生成有缩进的表格代码的相关资料,代码简单易懂,非常具有参考价值,需要的朋友可以参考下

最近做了个用户管理系统,其中有项目需求,要求用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}]}]

js

// 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>&nbsp;Ⅰ</b>','<b>&nbsp;&nbsp;Ⅱ</b>','<b>&nbsp;&nbsp;&nbsp;Ⅲ</b>','<b>&nbsp;&nbsp;&nbsp;&nbsp;Ⅵ</b>','<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ⅴ</b>','<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ⅵ</b>','<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ⅶ</b>','<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ⅷ</b>','<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ⅸ</b>','<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ⅹ</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 +'&nbsp;</td>\
<td>'+ data[i].paramDesc +'&nbsp;</td>\
<td>'+ data[i].value +'&nbsp;</td>\
<td>'+ data[i].comment +'&nbsp;</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>&nbsp;Ⅰ</b>','<b>&nbsp;&nbsp;Ⅱ</b>','<b>&nbsp;&nbsp;&nbsp;Ⅲ</b>','<b>&nbsp;&nbsp;&nbsp;&nbsp;Ⅵ</b>','<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ⅴ</b>','<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ⅵ</b>','<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ⅶ</b>','<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ⅷ</b>','<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ⅸ</b>','<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ⅹ</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 +'&nbsp;</td>\
<td>'+ data[i].paramDesc +'&nbsp;</td>\
<td>'+ data[i].value +'&nbsp;</td>\
<td>'+ data[i].comment +'&nbsp;</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>

相关文章

  • JavaScript实现构造json数组的方法分析

    JavaScript实现构造json数组的方法分析

    这篇文章主要介绍了JavaScript实现构造json数组的方法,结合实例形式对比分析了javascript构造json数组的实现方法及相关操作注意事项,需要的朋友可以参考下
    2018-08-08
  • MVVM框架下实现分页功能示例

    MVVM框架下实现分页功能示例

    分页这种组件,几乎每一种框架都有这样的组件,这篇文章主要介绍了MVVM框架下实现分页功能示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 购物车选中得到价格实现示例

    购物车选中得到价格实现示例

    本文为大家介绍下购物车如何实现选中得到价格,下面有个不错的示例,大家可以参考下
    2014-01-01
  • JS中利用localStorage防止页面动态添加数据刷新后数据丢失

    JS中利用localStorage防止页面动态添加数据刷新后数据丢失

    本文给大家分享一段js代码利用利用localStorage防止页面动态添加数据刷新后数据丢失问题,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
    2017-03-03
  • 微信小程序使用this.setData()遇到的问题及解决方案详解

    微信小程序使用this.setData()遇到的问题及解决方案详解

    this.setData估计是小程序中最经常用到的一个方法,但是要注意其实他是有限制的,忽略这些限制的话,会导致数据无法更新,下面这篇文章主要给大家介绍了关于微信小程序使用this.setData()遇到的问题及解决方案,需要的朋友可以参考下
    2022-08-08
  • TypeScript中never类型的妙用详解

    TypeScript中never类型的妙用详解

    TypeScript 是一种静态类型的编程语言,它可以让我们在编写 JavaScript 代码时,提前发现并避免一些潜在的错误,本文主要为大家介绍了TypeScript中never类型的妙用,感兴趣的可以了解下
    2023-11-11
  • 使用JavaScript实现二值化图像

    使用JavaScript实现二值化图像

    这篇文章主要为大家详细介绍了使用JavaScript将图像转换为黑白二值图的两种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • ES6实现图片切换特效代码

    ES6实现图片切换特效代码

    这篇文章主要介绍了ES6实现图片切换特效代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • javascript学习笔记--数字格式类型

    javascript学习笔记--数字格式类型

    很多人也许只知道 123,123.456,0xff 之类的数字格式。 其实 js 格式还有很多数字格式类型,比如 1., .1 这样的,也有 .1e2 这样的。
    2014-05-05
  • Javascript String 字符串操作包

    Javascript String 字符串操作包

    提供一个 JS String 包,包含了一些常用的对字符串操作的函数,详细的请看源码及演示
    2010-10-10

最新评论