资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/重构一段基于原生JavaScript的表格绘制代码

重构一段基于原生JavaScript的表格绘制代码

番茄西红柿 / 2013人阅读

为了在CardSimulate项目中方便的显示技能和效果列表，决定重构以前编写的一段JavaScript代码——att表格绘制库，这段代码的作用是将特定的JavaScript数据对象转化为表格，支持精细的样式设置和一些复杂报表功能并且提供了自由的扩展性。可以用较新的Chrome浏览器访问https://ljzc002.github.io/Att/HTML/TEST/AttSample.html查看新版代码的例子，旧版代码的介绍见：https://www.cnblogs.com/ljzc002/p/5511510.html。

1、从表格类初始化表格对象

旧版的代码直接将表格对象作为一个全局变量，新版代码则定义了一个表格类，而每一个表格对象则是表格类的实例，这样就可以方便的在一个页面里添加多个表格对象，并有条理的管理多个表格的工作流程和属性。表格对象的初始化代码如下：

</>复制代码 
  1.  1 /**
  2.  2  * Created by Administrator on 2015/5/11.
  3.  3  */
  4.  4 //动态画表类，尝试使用自包含结构
  5.  5 //2016/8/31在表格中加入更多的格式选择
  6.  6 //2018/10/31重构att6框架为att7版本
  7.  7 Att7=function()
  8.  8 {
  9.  9 
  10. 10 }
  11. 11 Att7.prototype.init=function(param)//只初始化对象的属性，不实际绘制
  12. 12 {
  13. 13     try
  14. 14     {
  15. 15         this.base=param.base;//表格的容器对象
  16. 16         this.id=param.id;//表格的id
  17. 17         //this.left=param.left?param.left:0;//在容器对象内的左侧距离->认为tab_data和div_table完全重合
  18. 18         //this.top=param.top?param.top:0;//上部距离
  19. 19         this.rowsp=param.rowsp?param.rowsp:50;//默认每页显示50条数据，输入负值表示无限制
  20. 20         //this.page_current=param.page_current?param.page_current:0;//默认显示数据集的第一页，初始索引为0
  21. 21         this.isStripe=param.isStripe?param.isStripe:1;//这种三目运算不适用于布尔值！！！！默认奇偶行使用不同颜色
  22. 22         this.isThlocked=param.isThlocked?param.isThlocked:0;//默认不锁定表头
  23. 23         this.isCollocked=param.isCollocked?param.isCollocked:0;//默认不锁定表列
  24. 24         this.showIndex=param.showIndex?param.showIndex:1;//默认在左侧显示行号
  25. 25         this.baseColor=param.baseColor?param.baseColor:"#ffffff";//默认背景色为白色，间隔色为背景色亮度降低十六分之一
  26. 26         this.stripeColor=param.stripeColor?param.stripeColor:"#eeeeee";//有时要求奇数行和偶数行使用不同的颜色
  27. 27         this.pickColor=param.pickColor?param.pickColor:"#97ceef";//选择了某一行时要突出显示这一行
  28. 28         this.div_temp1=document.createElement("div");//这几个div用来对背景颜色进行比较，因为不同的浏览器对背景颜色的保存方式不同
  29. 29         this.div_temp1.style.backgroundColor=this.baseColor;//有的用小写字母有的用大写字母，有的用rgb+数字，所以这里主动建立div
  30. 30         this.div_temp2=document.createElement("div");//在同样的保存方式下对颜色进行比较
  31. 31         this.div_temp2.style.backgroundColor=this.stripeColor;
  32. 32         this.div_temp3=document.createElement("div");
  33. 33         this.div_temp3.style.backgroundColor=this.pickColor;
  34. 34         this.str_indexwid=param.str_indexwid?param.str_indexwid:"100px";//索引列的宽度
  35. 35         this.num_toolhei=param.num_toolhei?param.num_toolhei:80;//表格上部的工具区的高度
  36. 36        //固有属性，点击某些单元格时可以打开的小窗口
  37. 37         this.html_onclick="
    38             "float: left;line-height: 20px">    " +
  38. 39             "
    " +
  39. 40             " 详情" +
  40. 41             " " +
  41. 43             " " +
  42. 44             " ";
  43. 45         this.html_onmouseover=//鼠标移入时弹出的小文本提示框
  44. 46             "
    47             "style="width: 100%;height: 100%;margin: 0px;border: 1px solid;padding: 0px;float: left;line-height: 20px">    " +
  45. 48                 " " +
  46. 50             "";
  47. 51     }
  48. 52     catch(e)
  49. 53     {
  50. 54         console.log("表格初始化异常！"+e);
  51. 55         return false;
  52. 56     }
  53. 57     return "ok";
  54. 58 }

这里设置了表格对象的各项属性，第28到33行用不显示的div解决了dom标签颜色比较问题，第37到50行定义了两个窗口小控件以备后续调用。init方法的调用方式如下：

</>复制代码 
  1.  1 var table1=new Att7();
  2.  2     var objp={
  3.  3         base:"div_tab",
  4.  4         id:"table1",
  5.  5         //left:50,
  6.  6         //top:50,
  7.  7         rowsp:999,
  8.  8         isThlocked:1,
  9.  9         isCollocked:2,//不包括索引列？-》包括
  10. 10         baseColor:"#00ff00",
  11. 11         stripeColor:"#00aa00",
  12. 12         pickColor:"#97ceef"
  13. 13     }
  14. 14     if(table1.init(objp)=="ok")
  15. 15     {//下面是数据显示

2、表格容器的建立：

表格显示时dom结构如下：

其中all_base是所有表格相关元素的总容器，div_tool是表格上面的工具区，里面可以放置一些选择筛选条件的控件，div_tab是表格主体所在的区域，table1是根据数据生成的表格dom，三个div_mask是锁定表头或者锁定表列时使用的遮罩层dom。

使用的样式表文件如下：

</>复制代码 
  1.  1 /*专用于表格框架的样式*/
  2.  2 body{    margin: 0;    padding: 0;    border: 0;    text-align: center;    overflow: hidden;width: 100%;
  3.  3     height: 100%;position: fixed;    font-family: verdana,arial,sans-serif;    touch-action: none;
  4.  4     -ms-touch-action: none;font-size: 12px;min-width: 600px;}
  5.  5 #all_base{min-height: 576px;min-width: 1024px;height: 100%;width:100%;position: relative;overflow-x:auto;overflow-y: hidden;}
  6.  6 /*表格的属性*/
  7.  7 td input{    height: 100%;    width: 100%;    border:0;    text-align: center;    background-color: inherit;}
  8.  8 .div_tab{float: left;position: relative;width:4000px;overflow-x: hidden;overflow-y: scroll}
  9.  9 .div_tab td{    text-align: center;    /*border: solid 1px #008000;*/    border-right:solid 1px #008000;    border-bottom: solid 1px #008000;
  10. 10     line-height: 16px;    font-size: 13px;    height: 24px;    padding: 1px;    background-color: inherit;    word-break: keep-all;
  11. 11 /*display: inline-block*/}
  12. 12 .div_tab th{    text-align: center;    /*border: solid 1px #008000;*/    line-height: 16px;    font-size: 13px;    height: 36px;
  13. 13     padding: 1px;    text-align: center;    border-right: solid 1px #008000;    border-bottom: solid 1px #008000;    word-break: keep-all;
  14. 14     white-space:nowrap;    overflow: hidden;    text-overflow: ellipsis;/*display: inline-block*/}
  15. 15 .div_tab table{    float: left;    width: auto;    border-right-width:0px;    border: solid 1px #008000;    table-layout: fixed;}
  16. 16 .div_tab tr{    width: auto;    vertical-align: middle;    /*border: solid 1px #008000;*/    padding: 1px;}
  17. 17 td a{    cursor: pointer;}
  18. 18 td button{    cursor: pointer;}
  19. 19 .div_mask2{    display:block;    left: 0px;    top: 0px;    /*filter: alpha(opacity=50);    opacity: 0.50;*/    overflow: hidden;/*锁定的表头表列*/
  20. 20     position: absolute;    float: left;    overflow-x: hidden}
  21. 21 table{    border-spacing:0;}
  22. 22 .div_mask2 td{    text-align: center;    /*border: solid 1px #008000;*/    border-right:solid 1px #008000;    border-bottom: solid 1px #008000;
  23. 23     line-height: 16px;    font-size: 13px;    height: 24px;    padding: 1px;    background-color: inherit;    word-break: keep-all;}
  24. 24 .div_mask2 th{    text-align: center;    /*border: solid 1px #008000;*/    line-height: 16px;    font-size: 13px;    height: 36px;
  25. 25     padding: 1px;    text-align: center;    border-right: solid 1px #008000;    border-bottom: solid 1px #008000;    word-break: keep-all;
  26. 26     white-space:nowrap;    overflow: hidden;    text-overflow: ellipsis;}
  27. 27 .div_mask2 table{    float: left;    width: auto;    border-right-width:0px;    border: solid 1px #008000;    table-layout: fixed;
  28. 28     position: absolute;}
  29. 29 .div_mask2 tr{    width: auto;    vertical-align: middle;    /*border: solid 1px #008000;*/    padding: 1px;}
  30. 30 .combo-panel li{    float:none;}
  31. 31 .btn_limlen{    /*float: left;*/    height: 20px;    width: 20px;    border: 1px solid;    /*margin-top: 6px;*/    /*margin-left: 4px;*/
  32. 32     background: url(../ASSETS/IMAGE/play.png) no-repeat;    position: absolute;    -moz-border-radius: 3px;      /* Gecko browsers圆角 */
  33. 33     -webkit-border-radius: 3px;   /* Webkit browsers */    border-radius:3px;            /* W3C syntax */     position: absolute;
  34. 34     top: 6px;    right: 4px;}

遗憾的是，因为上述CSS的调试过程太长，以至于已经忘记了这样设置的原因，如果您使用时出现莫名其妙的元素错位，请自己调试。

3、启动表格绘制

通过表格对象的draw方法启动表格绘制

调用draw方法的方式如下：

</>复制代码 
  1.  1 if(table1.init(objp)=="ok")
  2.  2     {
  3.  3         var obj_datas=[
  4.  4                 "测试表格",
  5.  5                 ["测试表头","测试表头","测试表头","测试表头","测试表头","测试表头","测试表头","测试表头"],
  6.  6                 ["str"
  7.  7                     ,"limit"
  8.  8                     ,["switch",["value1","text1"],["value2","text2"]]
  9.  9                     ,["input",["class1"],["height","10px"]]
  10. 10                     ,["select","class2",[["value1","text1"],["value2","text2"],["value3","text3"]],"onChange()"]
  11. 11                     ,["check","class3"]
  12. 12                     ,["button","class4","按钮","80px",["height","10px"]]
  13. 13                     ,["a","class5",["height","10px"]]
  14. 14                 ],
  15. 15                 [100,200,300,400,500,600,700,800],
  16. 16                 ["value1","value2value2value2value2value2value2value2value2value2value2","value1","value2","value1","value2","value1","value2"],
  17. 17                 ["value1","value2","value1","value2","value1","value2","value1","value2"]
  18. 18                 ,["value1","value2","value1","value2","value1","value2","value1","value2"]
  19. 19 ];
  20. 20         table1.draw(obj_datas,0);//显示数据obj_datas的第0行
  21. 21         requestAnimFrame(function(){table1.AdjustWidth();});
  22. 22     }

其中obj_datas是一个自定义的数据对象，这个对象可能从后端程序发送过来也可能是在前台组装生成。requestAnimFrame是截取自谷歌WebGL工具库的一个方法，用来“延时一会”，等待浏览器完成表格容器渲染后，再调整表格尺寸从而使表格布局紧密。

延时代码如下：

</>复制代码 
  1.  1 // Copyright 2010, Google Inc.
  2.  2 window.requestAnimFrame = (function() {
  3.  3     return window.requestAnimationFrame ||
  4.  4         window.webkitRequestAnimationFrame ||
  5.  5         window.mozRequestAnimationFrame ||
  6.  6         window.oRequestAnimationFrame ||
  7.  7         window.msRequestAnimationFrame ||
  8.  8         function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
  9.  9             window.setTimeout(callback, 1000/60);
  10. 10         };
  11. 11 })();

4、表格绘制代码的介绍：

a、首先做一些和表格翻页有关的准备工作：

</>复制代码 
  1.  1 Att7.prototype.draw=function(data,page_current)//实际绘制dom元素
  2.  2 {
  3.  3     this.totalpages=0;//记录下一共有多少页
  4.  4     if(this.rowsp>0)
  5.  5     {
  6.  6         this.totalpages=Math.ceil((data.length-4)/this.rowsp);
  7.  7     }
  8.  8     if(this.totalpages==0)
  9.  9     {
  10. 10         this.totalpages=1;
  11. 11     }
  12. 12     //计算当前页数
  13. 13     if(page_current<0)
  14. 14     {
  15. 15         alert("到达数据首页！");
  16. 16         this.page_current=0;
  17. 17     }
  18. 18     else if(page_current>=this.totalpages)
  19. 19     {
  20. 20         alert("到达数据末尾");
  21. 21         this.page_current=this.totalpages-1;
  22. 22     }
  23. 23     else
  24. 24     {
  25. 25         this.page_current=page_current;
  26. 26     }

 因为att将所有dom标签的生成工作放在浏览器端，所以可以一次性将所有数据从后台读取到前端，由前端JavaScript程序进行分页操作。（而传统表格绘制工具多把dom标签生成放在后台程序中，为了降低后台压力，分页操作多在数据库层面进行）

翻页方法代码如下：

</>复制代码 
  1.  1 //翻页处理
  2.  2 Att7.prototype.ChangePage=function(flag)
  3.  3 {
  4.  4     document.body.style.cursor=wait;
  5.  5     switch(flag)//不同的翻页动作对应不同的页号处理
  6.  6     {
  7.  7         case "0":
  8.  8         {
  9.  9             this.page_current=0;
  10. 10             break;
  11. 11         }
  12. 12         case "+":
  13. 13         {
  14. 14             this.page_current++;
  15. 15             break;
  16. 16         }
  17. 17         case "-":
  18. 18         {
  19. 19             this.page_current--;
  20. 20             break;
  21. 21         }
  22. 22         case "9999":
  23. 23         {
  24. 24             this.page_current=9999;
  25. 25             break;
  26. 26         }
  27. 27     }
  28. 28     this.draw(this.data,this.page_current);
  29. 29     document.getElementById(t_page_span).innerHTML=this.totalpages;
  30. 30     try {//万一没有定义
  31. 31         AdjustColor();
  32. 32     }
  33. 33     catch(e)
  34. 34     {
  35. 35 
  36. 36     }
  37. 37     document.getElementById(c_page_span).innerHTML=this.page_current+1;
  38. 38     document.body.style.cursor=default;
  39. 39     var _this=this;
  40. 40     try
  41. 41     {
  42. 42         requestAnimFrame(function () {
  43. 43             _this.AdjustWidth()
  44. 44         });
  45. 45     }
  46. 46     catch(e)
  47. 47     {
  48. 48 
  49. 49     }
  50. 50 }

根据ChangePage方法的不同参数，可以进行四种不同的翻页操作，您可以再需要的地方建立四个按钮来对应这些操作，而翻页操作实际上只是改变了参数的draw方法。t_page_span和c_page_span是两个span标签，用来显示总页数和当前页数。AdjustColor是一个可选的方法，在绘制表格后遍历单元格，根据需求改变符合某种条件的单元格的颜色。（这里并未使用）

b、在开始绘制之前清理以前可能绘制过的id相同的表格：

</>复制代码 
  1.  1 //接着上面的翻页准备
  2.  2 this.data=data;//表格的数据集
  3.  3     var tab_data;//table标签
  4.  4     var tab_colmask;//列锁定遮罩标签
  5.  5     if (document.getElementById(this.id))//如果已有该表
  6.  6     {//清理已有的dom
  7.  7         tab_data= document.getElementById(this.id);
  8.  8         var parent = tab_data.parentNode;
  9.  9         parent.removeChild(tab_data);
  10. 10         if(document.getElementById("div_thmask"))//删除锁定表头的遮罩层
  11. 11         {
  12. 12             var div =document.getElementById("div_thmask");//看来这样的设定还不能支持一个页面中同时存在多个锁定表头表格
  13. 13             div.parentNode.removeChild(div);
  14. 14         }
  15. 15         if(document.getElementById("tab_mask2"))//删除锁定表列的遮罩层
  16. 16         {
  17. 17             var tab =document.getElementById("tab_mask2");
  18. 18             tab.parentNode.removeChild(tab);
  19. 19         }
  20. 20         if(document.getElementById("div_thmask3"))//
  21. 21         {
  22. 22             var tab =document.getElementById("div_thmask3");
  23. 23             tab.parentNode.removeChild(tab);
  24. 24         }
  25. 25     }
  26. 26     tab_data = document.createElement("table");//重新建立table标签
  27. 27     tab_data.id = this.id;
  28. 28     tab_data.cellPadding = "0";
  29. 29     tab_data.cellSpacing = "0";
  30. 30     tab_data.style.position = "absolute";
  31. 31     //tab_data.style.top = this.top + "px";
  32. 32     //tab_data.style.left = this.left + "px";
  33. 33     var div_table;//包含表格的容器元素
  34. 34 
  35. 35     var obj=this.base;//这个属性可能是id字符串也可能是对象本身
  36. 36     if((typeof obj)=="string"||(typeof obj)=="String")
  37. 37     {
  38. 38         div_table = document.getElementById(obj);
  39. 39     }
  40. 40     else
  41. 41     {
  42. 42         div_table=obj;
  43. 43     }
  44. 44     div_table.innerHTML="";
  45. 45     div_table.appendChild(tab_data);//将table标签放入容器里
  46. 46     this.div_table=div_table;
  47. 47     tab_data = document.getElementById(this.id);

 

c、表格表头的绘制与遮罩原理

在一个简单的表格里绘制表头并不复杂：

</>复制代码 
  1.  1 var tr1 = document.createElement("tr");//填写表头（接着清理代码）
  2.  2     if(this.showIndex==1)//如果显示索引列
  3.  3     {
  4.  4         this.InsertaTHStr(tr1, "第"+(this.page_current+1) + "页",this.str_indexwid);//IE8中缺少参数会报错
  5.  5     }
  6.  6     for (var k = 0; k < data[1].length; k++)
  7.  7     {
  8.  8         this.InsertaTHStr(tr1, data[1][k],(data[3][k]+"px"));
  9.  9     }
  10. 10     tab_data.appendChild(tr1);//将tr放入table
  11. 11     tr1.style.backgroundColor=this.baseColor;

如果选择显示索引列，则在表头的最左侧多插入一个th，InsertaTHStr方法用来向指定tr中插入th，参数分别是tr对象、列名、列宽，这里的data也就是之前构造的数据集。

InsertaTHStr代码如下：

</>复制代码 
  1.  1 //一些工具方法
  2.  2 /**
  3.  3  * 向一个表行中添加字符型表头元素
  4.  4  * @param tr 表行ID
  5.  5  * @param str 添加字符
  6.  6  * @param wid 列宽（字符型px）
  7.  7  * @constructor
  8.  8  */
  9.  9 Att7.prototype.InsertaTHStr=function(tr,str,wid)
  10. 10 {
  11. 11     var th=document.createElement("th");
  12. 12     th.style.width=wid?wid:"200px";
  13. 13     if(str==null)
  14. 14     {
  15. 15         str="";
  16. 16     }
  17. 17     th.appendChild(document.createTextNode(str));
  18. 18     tr.appendChild(th);
  19. 19 }

然而当需要锁定表头或者锁定表列时，事情变得复杂，接着绘制表头的代码：

</>复制代码 
  1.  1 this.arr_lock=[];//all_base左右滑动时需要调整位置的元素
  2.  2     this.arr_locky=[];
  3.  3     if(this.isThlocked==1)//绘制锁定表头的遮罩层，它的内容和原表格的表头是一样的
  4.  4     {
  5.  5         var div_thmask=document.createElement("div");
  6.  6         div_thmask.className="div_mask2";
  7.  7         div_thmask.id="div_thmask";
  8.  8         div_thmask.style.zIndex="200";
  9.  9         var div_parent=div_table.parentNode;
  10. 10         this.div_parent=div_parent;
  11. 11         div_thmask.style.top=(compPos2(div_table).top-parseInt(div_table.style.height.split("p")[0]))+this.top+"px";//定位添加的遮罩层
  12. 12         div_thmask.style.left=compPos2(div_table).left+this.left+"px";
  13. 13         div_thmask.style.width="6000px";//遮罩的最大宽度
  14. 14         div_thmask.style.height="42px";
  15. 15         div_thmask.style.top=this.num_toolhei+"px";
  16. 16         //div_thmask.getElementsByTagName("table")[0].style.backgroundColor=this.baseColor;
  17. 17 
  18. 18         var tab_thmask= document.createElement("table");
  19. 19         var tr_thmask=document.createElement("tr");
  20. 20         if(this.showIndex==1)//如果不禁止索引列
  21. 21         {
  22. 22             this.InsertaTHStr(tr_thmask, "第" + (this.page_current + 1) + "页", this.str_indexwid);//IE8中缺少参数会报错
  23. 23         }
  24. 24         for (var k = 0; k < data[1].length; k++)
  25. 25         {
  26. 26             this.InsertaTHStr(tr_thmask, data[1][k],(data[3][k]+"px"));
  27. 27         }
  28. 28         tab_thmask.appendChild(tr_thmask);
  29. 29         tab_thmask.style.backgroundColor=this.baseColor;
  30. 30         div_thmask.appendChild(tab_thmask);
  31. 31         div_parent.appendChild(div_thmask);
  32. 32     }
  33. 33     if(this.isCollocked>0)//绘制锁定表列的遮罩层，估计不需要外包装的div，可以和data_table共享div_table（考虑到层数决定这样做）
  34. 34     {
  35. 35         this.arr_lock.push(["tab_mask2",1,0]);//第一个参数是要锁定的标签的id，第二个是是否锁定，第三个是标签的初始水平偏移量
  36. 36         this.arr_lock.push(["div_bz",0,0]);
  37. 37         tab_colmask= document.createElement("table");
  38. 38         tab_colmask.cellPadding = "0";
  39. 39         tab_colmask.cellSpacing = "0";
  40. 40         tab_colmask.style.position = "absolute";
  41. 41         tab_colmask.className="div_mask2";
  42. 42         tab_colmask.id="tab_mask2";
  43. 43         tab_colmask.style.zIndex="150";
  44. 44         tab_colmask.style.top="0px";
  45. 45         tab_colmask.style.backgroundColor=this.baseColor
  46. 46         var tr_mask= document.createElement("tr");//创造一个占位用的表头行
  47. 47         if(this.showIndex==1)//如果不禁止索引列
  48. 48         {
  49. 49             this.InsertaTHStr(tr_mask, "第" + (this.page_current + 1) + "页", this.str_indexwid);
  50. 50         }
  51. 51         for (var k = 0; k < this.isCollocked-1; k++)
  52. 52         {
  53. 53             this.InsertaTHStr(tr_mask, data[1][k],(data[3][k]+"px"));
  54. 54         }
  55. 55         tab_colmask.appendChild(tr_mask);
  56. 56     }
  57. 57     //如果同时锁定了表头和左侧的表列
  58. 58     if((this.isThlocked==1)&&(this.isCollocked>0))
  59. 59     {
  60. 60         this.arr_lock.push(["div_thmask3",1,0]);
  61. 61         var div_thmask=document.createElement("div");
  62. 62         div_thmask.className="div_mask2";
  63. 63         div_thmask.id="div_thmask3";
  64. 64         div_thmask.style.zIndex="250";
  65. 65         var div_parent=div_table.parentNode;
  66. 66         div_thmask.style.top=(compPos2(div_table).top-parseInt(div_table.style.height.split("p")))+"px";//定位添加的遮罩层
  67. 67         div_thmask.style.left=compPos2(div_table).left+"px";
  68. 68         div_thmask.style.width="4000px";
  69. 69         div_thmask.style.height="42px";
  70. 70         div_thmask.style.top=this.num_toolhei+"px";
  72.                  
  73.                                                                                                                     
  74.                          云服务器
  75.                                              
  76.                          GPU云服务器
  77.                                                                                                                                                  
  78.                                       
  79.                      
  80.                     
  81.                                                                                                原生的javascript
  82.                                                                                                            绘制表格
  83.                                                                                                            代码重构
  84.                                                                                                            基于javascript的webgis开发
  85.                                                          
  86.                  
  87.                
  88.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1569.html

相关文章

  • 回到基础：如何用原生 DOM API 生成表格

    摘要：接下来该填表了生成行和单元格为了填充表格可以遵循同样的方法，但这次我们需要迭代数组中的每个对象。对于每个对象，我们可以使用生成单元格。 翻译：疯狂的技术宅原文：https://www.valentinog.com/bl... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章 怎样用原生 JavaScript 生成表格需？本文告诉你答案！...

    Sunxb 评论0 收藏0

  • 跨平台技术演进

    摘要：接下来，我将从原理优缺点等方面为大家分享跨平台技术演进。小程序年是微信小程序飞速发展的一年，年，各大厂商快速跟进，已经有了很大的影响力。下面，我们以微信小程序为例，分析小程序的技术架构。 前言 大家好，我是simbawu ，@BooheeFE Team Leader，关于这篇文章，有问题欢迎来这里讨论。 随着移动互联网的普及和快速发展，手机成了互联网行业最大的流量分发入口。以及随着5G...

    魏宪会 评论0 收藏0

  • 跨平台技术演进

    摘要：接下来，我将从原理优缺点等方面为大家分享跨平台技术演进。小程序年是微信小程序飞速发展的一年，年，各大厂商快速跟进，已经有了很大的影响力。下面，我们以微信小程序为例，分析小程序的技术架构。 前言 大家好，我是simbawu ，@BooheeFE Team Leader，关于这篇文章，有问题欢迎来这里讨论。 随着移动互联网的普及和快速发展，手机成了互联网行业最大的流量分发入口。以及随着5G...

    MasonEast 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<