javascript - HTML转成JSON数据-PHP中文网问答

例如以下HTML

01010004
一次性注射器
10ml

要转换成 {"ID":"01010004","Name":"一次性注射器"，"Specification"："10ml"} 进行存储

有什么插件或者思路

补充如下：

HTML结构：

JS方法如下：（采用jQuery）

function getFilterTableData(tableID) {

                var operatorMap = {
                    1: 'AND',
                    2: 'OR'
                };

                var conditionAndRangeMap = {

                    condition: function($obj) {
                        return $obj.children('select').val()
                    },

                    pickRange: function($obj) {
                        return {
                            val: $obj.children('select').val(),
                            mode: 'select'
                        }
                    },

                    editRange: function($obj) {
                        return {
                            val: $obj.children('input').val(),
                            mode: 'input'
                        }
                    },

                    nullRange: function($obj) {
                        return
                    }

                };

                var c = '.tableStyle-2-container',
                    h = '.tableStyle-2-operator',
                    b = '.tableStyle-2-content',
                    l = '.tableStyle-2-content-list',
                    li = '.tableStyle-2-content-list-unitRow',
                    label = '.unitRow-label';

                var result = {};

                var $start = $(tableID).children();

                var looper = function($c, data) {

                    var $unitH = $c.children(h), //操作符
                        $unitB = $c.children(b), //内容
                        $unitB_children = $unitB.children(); //内容子节点

                    //如果有操作符
                    if($unitH.length) {
                        data.type = operatorMap[$unitH.attr('operator')];
                    }

                    //存储子节点信息
                    data.children = [];

                    //如果内容有子节点
                    if($unitB_children.length) {

                        var $unitL = $unitB.children(l); //内容 - 列表
                        var $unitC = $unitB.children(c); //内容 - 容器

                        if($unitL.length) {

                            var children = [];
                            var $lis = $unitL.children(li);

                            for(var i = 0, length = $lis.length; i < length; i++) {

                                var $label = $lis.eq(i).children(label);

                                var $condition = $label.next();

                                var $range = $condition.next();

                                var unitRowData = $.extend({
                                    
                                    col: $label.text()
                                    
                                }, {
                                    rel: conditionAndRangeMap[$condition.attr('class').split('-')[1]]($condition),
                                    
                                }, conditionAndRangeMap[$range.attr('class').split('-')[1]]($range));

                                children.push(unitRowData);

                            }

                            data.children.push({
                                children: children
                            });
                        }

                        if($unitC.length) {

                            data.children.unshift({});

                            looper($unitC, data.children[0]);

                        }

                    }

                }

                looper($start, result);

                return result

            }

            var resultData = getFilterTableData('#businessData-filter-table');
            
            console.log(JSON.stringify(resultData));

Name

Specification

01010004

一次性注射器

10ml

var columnMap = []; $("table tr:first th").each(function(index) { var $td = $(this); columnMap[index] = $td.text(); }); // 因为第一列是 CheckBox，改其值为 ""，以便后面取数据的时候忽略 columnMap[0] = "";

function convertToModel($tr) { var model = {}; $("td", $tr).each(function(i) { var $td = $(this); var name= columnMap[i]; if (name) { // 排除 "" model[name] = $td.text(); } }); return model; }

let allTr = Array.prototype.slice.call(document.querySelectorAll('tr')); let keys = ['ID', 'Name', 'Specification']; let data = allTr.map(function(tr) { let json = {}; Array.prototype.slice.call(tr.querySelectorAll('td'), 1).forEach(function(v, i) { json[keys[i]] = v.textContent; }); return json; }); console.log(data);

// 给你的每个ID上加个 '.item' 类 var items = document.querySelectorAll('.item'); var jsonArray = Array.prototype.map.call(items, function(item){ return { ID: item.textContent, Name: item.nextElementSibling.textContent, Specification: item.nextElementSibling.nextElementSibling.textContent } })

全部回复(3)

高洛峰2017-04-11 09:25:20 3楼

我觉得你这个数据给不得完整，因为你没给列头数据，从你的信息来看，我估计表格应该是这样的

ID	Name	Specification
01010004	一次性注射器	10ml

首先，你得找到列序号与表头（列名称）的关系

不喜欢写原生 DOM 操作，我用 jQuery 示例了

如果实在没有列头，也可以手工写一个映射关系出来

var columnMap = ["", "ID", "Name", "Specification"];

现在来遍历表格的每一行（除标题行），把每一行转换成一个对象

var data = [];
$("table tr:not(:first)").each(function() {
    data.push(convertToModel($(this)));
});

其中 convertToModel 用于把一个 tr 的 jQuery 对象转换成模型，那么这个函数该怎么写呢？

最后是 jfiddle 上的示例

https://jsfiddle.net/w7rcuw8r/1/

如果你的表格不是用 <th> 而是用 <td> 来作为表头的单元格，那么注意改写对应的选择器。另外，如果表格像示例中那样通过 <thead> 和 <tbody> 来区分了列头和内容，选择器还可以优化。

赞 +0

添加回复

黄舟2017-04-11 09:25:20 2楼

谢邀，你这dom结构没任何特征，只有td的索引或许可用。

提供一种思路

黄舟2017-04-11 09:25:20 1楼