js获取表格中的数据并转成json格式

在开发的过程中，不一定所有数据都是单条存储的，有的时候也会出现将多条数据进行

整合，以另外一种形式存储数据库。

这篇文章介绍的就是将一个表格形式的数据转化成json格式进行存储。

此处给出的实例图如下：

可以看见这个表格中包含了input输入框，select选择框以及button删除按钮。需要实现的功能为将input输入框和select选择框中的数据进行存储，而button按钮选择不存储。

本文给出的思路是通过选择器得到tbody，然后再查找其中的tr，再通过tr选择其中的td进行逐层转换并逐层回传进行信息的整合。

源码如下：

Html代码：

<div class="panel panel-primary">
    <div class="panel-heading">信息表

<button type="button" class="btn btn-default" onclick="addItems()">添加项目      </button>

    </div>
    <div class="panel-body">
        <table class="table table-bordered table-hover" id="sampleTable">
            <thead>${tableMap}</thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <input type="hidden" value="" name="sampleInfo" id="sampleInfo">
</div> 

Javascript代码：

function submit2() {

        var tbody = $("#sampleTable").find("tbody");

changeTbodyToDetail(tbody);        $("#concreteForm").find("sampleInfo").val(changeTbodyToDetail(tbody));

        $("#concreteForm").submit();

        return false;

}

//结合本段js代码和html代码，可以看出这一方法是通过将表格信息进行格式转换后存储在属性为hidden的输入框中，在后台进行存储的。

 

//从一个tbody中获取数据并置入隐藏域
function changeTbodyToDetail(tbody) {
        var result = "";
        tbody.find("tr").each(function () {
            var b = changeTrToDetail($(this));
            result = result + b + ";";
        });
        result = result.substring(0, result.length - 1);
        $("input[name='sampleInfo']").val(result);
}

//从一个tr中获取数据
function changeTrToDetail(tr) {
        var result = "{";
        tr.find("td").each(function () {
            var a = changeTdToDetail($(this));
            if (a!=""){
                result = result + a + ",";
            }
        });
        result = result.substring(0, result.length - 1);
        result = result + "}";
        return result;
}

//从一个td中获取一个数据
function changeTdToDetail(id) {
        var input = id.find("input[type='text']");
        if (input.length > 0) {
            var name = input.prop("name");
            var val = input.val();
            var result = name + ":\"" + val + "\"";
            return result;
        }
        else{
            var select = id.find("select");
            var name = select.prop("name");
            var val = select.val();
            if(name==undefined){
                return "";
            }else{
                var result = name + ":\"" + val + "\"";
                return result;
            }
        }
}

可以看出整个转换的方法是选择了嵌套的方法，把整个功能变成了changeTbodyToDetail、changeTrToDetail、changeTdToDetail三个方法。每一层的处理方法都不难理解，但是在changeTdToDetail中有几个细节是需要注意的，也是在调试过程中进行修改才完善的方法。

在changeTdToDetail中需要实现的功能是选择存储input输入框和select选择框的数据，拒绝录入button删除按钮。为实现这一功能，需要增加一个判断语句进行筛选。在本段代码中if判断筛选出了input输入框和非input输入框，前者进行数据存储，后者仍需要进一步判断。需要注意的是，select选择框不同于input输入框，不能用.length进行判断。而在addItems()中我们定义button控件不同于使用的另外两个控件，设置button没有name属性，此处就可以通过name属性进行下一步判断，如果为undefined即为按钮，返回一个空string，不为undefined则进行数据传值。