一行js代码！实现一个简洁表格
来源：互联网 发布：广日电梯 知乎 编辑：程序博客网 时间：2024/06/05 22:46
周一开学了，回去补考 物流 ，悲催的人生。
废话不多说，直接上代码，嗯，4行了，不过明眼人都能看出来它还是一行吧。。
var myTable=new Table({ title:'大学四年', data:data, thead:thead});data的数据格式同Ext
var data=[ ['伤感','吃饭','睡觉','打游戏','学java','看这世界冷掉'],['伤感','吃饭','睡觉','打游戏','学java','看这世界冷掉'],['伤感','吃饭','睡觉','打游戏','学java','看这世界冷掉'],['伤感','吃饭','睡觉','打游戏','学java','看这世界冷掉']]var thead=['标题1','标题2','标题3','标题4','标题5','标题6']
当然，每次都想一行就创建这样一个表格，需要进行一定封装，代码如下，写的很随意， 没仔细推敲，没注释，也没有任何容错处理，凑合来吧。
很明显模仿的Ext的表格。
myExt={};myExt.util={};myExt.util.css={};myExt.util.css.applyCss=function(src){ var link=document.createElement('link')link.rel="stylesheet";link.type='text/css';link.href=src;document.getElementsByTagName('head')[0].appendChild(link);};function Table(config){ this.title=config.title;this.data=config.data;this.thead=config.thead;this.show();}Table.prototype.show=function(){ var table=document.createElement('table'); var tbody=document.createElement('tbody'); var cap=document.createElement('caption'); cap.appendChild(document.createTextNode(this.title)); table.appendChild(cap); table.appendChild(tbody); var thead=document.createElement('tr'); tbody.appendChild(thead); for(var m=0;this.thead[m];m++){ var th=document.createElement('th'); th.appendChild(document.createTextNode(this.thead[m])); thead.appendChild(th);}var rows=this.data.length;var cols=this.data[0].length;for(var i=0;i<rows;i++){ var tr=document.createElement('tr'); tbody.appendChild(tr);for(var j=0;j<cols;j++){if(j){var td=document.createElement('td'); td.appendChild(document.createTextNode(this.data[i][j])); tr.appendChild(td);}else{ var td=document.createElement('th'); td.appendChild(document.createTextNode(this.data[i][j])); tr.appendChild(td);}}}myExt.util.css.applyCss('table.css');document.body.appendChild(table);}var data=[ ['伤感','吃饭','睡觉','打游戏','学java','看这世界冷掉'],['伤感','吃饭','睡觉','打游戏','学java','看这世界冷掉'],['伤感','吃饭','睡觉','打游戏','学java','看这世界冷掉'],['伤感','吃饭','睡觉','打游戏','学java','看这世界冷掉']]var thead=['标题1','标题2','标题3','标题4','标题5','标题6']var myTable=new Table({ title:'大学四年', data:data, thead:thead});最后送大家一个纯js的canvas饼图，忘掉flash把。
- 一行js代码！实现一个简洁表格
- 超简洁js表格
- js实现添加删除表格的一行
- js实现表格的选中一行-------Day58
- js+jquery实现增加或删除表格中的一行数据
- js 动态表格添加一行删除一行
- js表格最后添加一行
- 用js代码实现表格的添加
- table表格排序js插件(高效简洁)
- 一个JS实现表格可排序
- js实现的一个表格效果
- js动态表格添加一行删除一行保存一行
- js漂浮广告代码(简洁!)
- JS代码简洁之道
- JS第一行代码
- js 一行代码写评星
- 十一行Python代码实现一个神经网络（第一部分）
- 十一行Python代码实现一个神经网络（第一部分）
- iPad商标之争对开发者的影响
- IIS服务器不可用－之我的完整解决
- hdoj 2199 Can you solve this equation?【二分查找】【水】
- 昔日烟王褚时健办果园成亿万富翁 拒上市圈钱
- 上からマリコ
- 一行js代码！实现一个简洁表格
- DelphiXE2自带的MD5算法的使用
- Android中解析doc、docx、xls、xlsx格式文件
- 架构师书单 2nd Edition
- PHP单例模式经典讲解
- 桜の木になろう
- 利用Oracle Items Open Interfaces导入物料信息
- 当容器padding后,容器内的元素设置margin时的计算
- SQLSERVER 简单使用记录1
