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);

冒泡排序

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

桶排序

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

堆排序

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

希尔排序

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

基数排序

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

十大经典排序算法

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

插入排序

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

快速排序

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

归并排序

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

选择排序

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

计数排序

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

html <table>表数据转 Json 格式

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

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

Ubuntu默认防火墙安装使用

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

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

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

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

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

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

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

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

Shell语法快速入门

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

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

python下如何安装.whl包

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

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

linux shell 获取当前正在执行脚本的绝对路径

常见的一种误区,是使用 pwd 命令,该命令的作用是“print name of current/working directory”,这才是此命令的真实含义,当前的工作目录,这里没有任何意思说明,这个目...

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

git使用专题

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

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

最多阅读

html <table>表数据转 Json 格式 2年以前  |  2341次阅读
使用 Vue 3.0,你可能不再需要Vuex了 9月以前  |  1080次阅读
Vue表单支持回车键自动提交 1年以前  |  995次阅读
2020 Vue经典面试题 11月以前  |  982次阅读
VS Code 配置与插件推荐 2019 年版 1年以前  |  902次阅读
Vue如何实现疫情地图展示 1年以前  |  891次阅读
koa2入门使用总结 1年以前  |  891次阅读
element中input的change事件 1年以前  |  776次阅读