html <table>表数据转 Json 格式

对一个小Table做个转换,需要先将HTML表格数据转成Json以便重新组合输出。于是搜索:HTML->Json,基本上都是找到以下代码:

var keysArr = new Array("key0", "key1","key2");  
function TableToJson(tableid) { //tableid是你要转化的表的表名,是一个字符串,如"example"  
    var rows = document.getElementById(tableid).rows.length; //获得行数(包括thead)  
    var colums = document.getElementById(tableid).rows[0].cells.length; //获得列数  
    var json = "[";  
    var tdValue;  
    for (var i = 1; i < rows; i++) { //每行  
        json += "{";  
        for (var j = 0; j < colums; j++) {  
            tdName = keysArr[j]; //Json数据的键  
            json += "\""; //加上一个双引号  
            json += tdName;  
            json += "\"";   
            json += ":";  

            tdValue = document.getElementById(tableid).rows[i].cells[j].innerHTML;//Json数据的值  
            if (j === 1) {//第1列是日期格式,需要按照json要求做如下添加  
                tdValue = "\/Date(" + tdValue + ")\/";  
            }  
            json += "\"";   
            json += tdValue;  
            json += "\"";   
            json += ",";  
        }  
        json = json.substring(0, json.length - 1);  
        json += "}";  
        json += ",";  
    }  
    json = json.substring(0, json.length - 1);  
    json += "]";  
    return json;  
}  

代码大体没有什么问题,给出了很好的思路,但有几个不足:

  • 转换Json的方式不好,如果先将表格整理成Javascript Object,再将Javascript Object转成Json就好了,如果代码是按这种思路写下去,后续要转成xml或其它格式也很容易做到,即代码本身的扩展性很强。
  • 没有考虑到colspan,rowspan相关的问题。即在第二个for循环依次取列数据时,可能某一个column不存在的,需要处理。

整理后代码如下:

//fieldArray与列对应,做为json的key
var fieldArray = new Array("code", "text","desc","proto");

/*
 *tableid是你要转化的表的表名,是一个字符串,如"mytable"
 */
function TableToJson(tableid) {
    //获得行数(包括thead)与列数
    var rows = document.getElementById(tableid).rows.length;
    var columCount = document.getElementById(tableid).rows[0].cells.length;

    if(columCount != fieldArray.length){
        //列与field不一致
        return "";
    }

    var tdName = "";
    var jsonArray = new Array();
    for (var i = 1; i < rows; i++) {
        //可能出现列合并,此种场景可以根据需要修改,在这里直接丢弃
        var thisRowColumnCount = document.getElementById(tableid).rows[i].cells.length;
        if(thisRowColumnCount != columCount){
            continue;
        }

        var jsonItem = new Object();
        for (var j = 0; j < columCount; j++) {
            var tdName = fieldArray[j];
            var tdValue = document.getElementById(tableid).rows[i].cells[j].innerHTML;
            tdValue = tdValue.trim();

            jsonItem[tdName] = tdValue;
        }
        jsonArray.push(jsonItem);
    }
    return JSON.stringify(jsonArray);
}

//call and output
var json = TableToJson("mytable");
console.log(json);

html <table>表数据转 Json 格式

对一个小Table做个转换,需要先将HTML表格数据转成Json以便重新组合输出。于是搜索:HTML-&gt;Json,基本上都是找到以下代码: var keysArr = new Array(&quot;key0&quot;, &quot;key1&quot;,&quot;key2&quot;...

发布于:1年以前  |  2048次阅读  |  详细内容 »

telnet命令判断远程端口是否可以连接

关于telnet telnet命令通常用来远程登录。telnet程序是基于TELNET协议的远程登录客户端程序。Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准协议和主要...

发布于:1年以前  |  2335次阅读  |  详细内容 »

Ubuntu默认防火墙安装使用

iptables是基于linux系统的真正的唯一防火墙,其管理了所有的网络规则的数据库。但由于其本身的复杂性,ubuntu开发了命令行工具ufw,ufw是一个命令行的主机端的iptables类防...

发布于:1年以前  |  2051次阅读  |  详细内容 »

Shell语法快速入门

一、基本语法 1.1、shell文件开头 shell文件必须以下面的行开始(必须方在文件的第一行): #!/bin/sh 符号#!用来告诉系统它后面的参数是用来执行该文件的程序。在这个例...

发布于:1年以前  |  1678次阅读  |  详细内容 »

使用git快速切换到某一次提交

如我们都知道的,使用git时,每一次提交都会产到一个ID,我们称之为commit id。那如何快速定位到某一个提交点呢?其实很简单,git checkout commitid就可以。 比如,想到回...

发布于:1年以前  |  1543次阅读  |  详细内容 »

python下如何安装.whl包

Wheel是新一代的python模块的发布工具与方案。.whl就是Whell的文件格式,使用whl格式的文件安装需要先安装whell: python install wheel 成功之后,再直接使用python安装就...

发布于:1年以前  |  1737次阅读  |  详细内容 »

git使用专题

git是现在最流形的版本管理工具了,我们平时使用最多的命令差不多就是克隆(git clone),拉取(git pull),推送(git push)了,然而这几个只是git的冰山一角,本专题带我们一...

发布于:1年以前  |  1104次阅读  |  详细内容 »

最多阅读

html <table>表数据转 Json 格式 1年以前  |  2050次阅读
electron-vue项目,关闭eslint语法检查器 11月以前  |  1393次阅读
Vue如何实现疫情地图展示 8月以前  |  686次阅读
koa2入门使用总结 10月以前  |  685次阅读
Vue表单支持回车键自动提交 8月以前  |  591次阅读
VS Code 配置与插件推荐 2019 年版 9月以前  |  572次阅读
npm命令行 11月以前  |  563次阅读
2020 Vue经典面试题 6月以前  |  562次阅读
ejs模板中的四种表达式输出形式 9月以前  |  495次阅读

Whoops, looks like something went wrong.