javascript - HTML转成JSON数据
本文介绍了javascript - HTML转成JSON数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
例如以下HTML
<tr class="jtable-row-even jtable-row-selected">
<td class="jtable-selecting-column">
<input type="checkbox" checked="checked"/>
</td>
<td class="">01010004</td>
<td class="">一次性注射器</td>
<td class="">10ml</td>
</tr>
要转换成 {"ID":"01010004","Name":"一次性注射器"，"Specification"："10ml"} 进行存储
有什么插件或者思路
补充如下：
HTML结构：
<!-- table -->
<div id="businessData-filter-table" class="tableStyle-2">
<!-- container -->
<div class="tableStyle-2-container">
<div id="bft-rootOperator" class="tableStyle-2-operator" operator="1">且</div>
<div id="bft-rootContainer" class="tableStyle-2-content">
<div class="tableStyle-2-container">
<div class="tableStyle-2-operator" operator="2">或</div>
<div class="tableStyle-2-content">
<div class="tableStyle-2-container">
<div class="tableStyle-2-operator" operator="1">且</div>
<div class="tableStyle-2-content">
<ul class="tableStyle-2-content-list">
<li class="tableStyle-2-content-list-unitRow">
<label class="unitRow-label">沈阳</label>
<div class="unitRow-condition">
<select name="unitRow-condition" class="select2 selectCondition">
<option value="1">属于</option>
<option value="2">不属于</option>
<option value="3" selected="selected">包含</option>
<option value="4">不包含</option>
<option value="5">为空</option>
<option value="6">非空</option>
<option value="7">开头是</option>
<option value="8">结尾是</option>
</select>
</div>
<div class="unitRow-editRange">
<input type="text" name="unitRow-editRange" class="editRange">
</div>
<div class="operationBar">
<i class="add" action="addListUnitRowEditBox"></i>
<i class="del" action="delListUnitRow"></i>
</div>
</li>
<li class="tableStyle-2-content-list-unitRow">
<label class="unitRow-label">重庆</label>
<div class="unitRow-condition">
<select name="unitRow-condition" class="select2 selectCondition">
<option value="1">属于</option>
<option value="2" selected="selected">不属于</option>
<option value="3">包含</option>
<option value="4">不包含</option>
<option value="5">为空</option>
<option value="6">非空</option>
<option value="7">开头是</option>
<option value="8">结尾是</option>
</select>
</div>
<div class="unitRow-pickRange">
<select name="unitRow-pickRange" class="select2 selectPickRange">
<option value="1" selected="selected">属于</option>
<option value="2">不属于</option>
<option value="3">包含</option>
<option value="4">不包含</option>
<option value="5">为空</option>
<option value="6">非空</option>
<option value="7">开头是</option>
<option value="8">结尾是</option>
</select>
</div>
<div class="operationBar">
<i class="add" action="addListUnitRowEditBox"></i>
<i class="del" action="delListUnitRow"></i>
</div>
</li>
<li class="tableStyle-2-content-list-unitRow">
<label class="unitRow-label">西安</label>
<div class="unitRow-condition">
<select name="unitRow-condition" class="select2 selectCondition">
<option value="1" selected="selected">属于</option>
<option value="2">不属于</option>
<option value="3">包含</option>
<option value="4">不包含</option>
<option value="5">为空</option>
<option value="6">非空</option>
<option value="7">开头是</option>
<option value="8">结尾是</option>
</select>
</div>
<div class="unitRow-pickRange">
<select name="unitRow-pickRange" class="select2 selectPickRange">
<option value="1">属于</option>
<option value="2">不属于</option>
<option value="3">包含</option>
<option value="4">不包含</option>
<option value="5" selected="selected">为空</option>
<option value="6">非空</option>
<option value="7">开头是</option>
<option value="8">结尾是</option>
</select>
</div>
<div class="operationBar">
<i class="add" action="addListUnitRowEditBox"></i>
<i class="del" action="delListUnitRow"></i>
</div>
</li>
</ul>
</div>
</div>
<ul class="tableStyle-2-content-list">
<li class="tableStyle-2-content-list-unitRow">
<label class="unitRow-label">广州</label>
<div class="unitRow-condition">
<select name="unitRow-condition" class="select2" style="width: 100%">
<option value="1">属于</option>
<option value="2">不属于</option>
<option value="3">包含</option>
<option value="4" selected="selected">不包含</option>
<option value="5">为空</option>
<option value="6">非空</option>
<option value="7">开头是</option>
<option value="8">结尾是</option>
</select>
</div>
<div class="unitRow-pickRange">
<select name="unitRow-pickRange" class="select2" style="width: 100%">
<option value="1">属于</option>
<option value="2">不属于</option>
<option value="3">包含</option>
<option value="4">不包含</option>
<option value="5">为空</option>
<option value="6">非空</option>
<option value="7" selected="selected">开头是</option>
<option value="8">结尾是</option>
</select>
</div>
<div class="operationBar">
<i class="add" action="addListUnitRowEditBox"></i>
<i class="del" action="delListUnitRow"></i>
</div>
</li>
<li class="tableStyle-2-content-list-unitRow">
<label class="unitRow-label">深圳</label>
<div class="unitRow-condition">
<select name="unitRow-condition" class="select2" style="width: 100%">
<option value="1">属于</option>
<option value="2">不属于</option>
<option value="3">包含</option>
<option value="4">不包含</option>
<option value="5">为空</option>
<option value="6">非空</option>
<option value="7">开头是</option>
<option value="8" selected="selected">结尾是</option>
</select>
</div>
<div class="unitRow-pickRange">
<select name="unitRow-pickRange" class="select2" style="width: 100%">
<option value="1">属于</option>
<option value="2">不属于</option>
<option value="3">包含</option>
<option value="4">不包含</option>
<option value="5" selected="selected">为空</option>
<option value="6">非空</option>
<option value="7">开头是</option>
<option value="8">结尾是</option>
</select>
</div>
<div class="operationBar">
<i class="add" action="addListUnitRowEditBox"></i>
<i class="del" action="delListUnitRow"></i>
</div>
</li>
</ul>
</div>
</div>
<!-- container -->
<ul class="tableStyle-2-content-list">
<li class="tableStyle-2-content-list-unitRow">
<label class="unitRow-label">长春</label>
<div class="unitRow-condition">
<select name="unitRow-condition" class="select2" style="width: 100%">
<option value="1">属于</option>
<option value="2" selected="selected">不属于</option>
<option value="3">包含</option>
<option value="4">不包含</option>
<option value="5">为空</option>
<option value="6">非空</option>
<option value="7">开头是</option>
<option value="8">结尾是</option>
</select>
</div>
<div class="unitRow-pickRange">
<select name="unitRow-pickRange" class="select2" style="width: 100%">
<option value="1">属于</option>
<option value="2">不属于</option>
<option value="3">包含</option>
<option value="4">不包含</option>
<option value="5" selected="selected">为空</option>
<option value="6">非空</option>
<option value="7">开头是</option>
<option value="8">结尾是</option>
</select>
</div>
<div class="operationBar">
<i class="add" action="addListUnitRowEditBox"></i>
<i class="del" action="delListUnitRow"></i>
</div>
</li>
<li class="tableStyle-2-content-list-unitRow">
<label class="unitRow-label">上海</label>
<div class="unitRow-condition">
<select name="unitRow-condition" class="select2" style="width: 100%">
<option value="1">属于</option>
<option value="2">不属于</option>
<option value="3" selected="selected">包含</option>
<option value="4">不包含</option>
<option value="5">为空</option>
<option value="6">非空</option>
<option value="7">开头是</option>
<option value="8">结尾是</option>
</select>
</div>
<div class="unitRow-pickRange">
<select name="unitRow-pickRange" class="select2" style="width: 100%">
<option value="1" selected="selected">属于</option>
<option value="2">不属于</option>
<option value="3">包含</option>
<option value="4">不包含</option>
<option value="5">为空</option>
<option value="6">非空</option>
<option value="7">开头是</option>
<option value="8">结尾是</option>
</select>
</div>
<div class="operationBar">
<i class="add" action="addListUnitRowEditBox"></i>
<i class="del" action="delListUnitRow"></i>
</div>
</li>
</ul>
</div>
</div>
<!-- container -->
</div>
<!-- table -->
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));
解决方案
我觉得你这个数据给不得完整，因为你没给列头数据，从你的信息来看，我估计表格应该是这样的
| ID | Name | Specification |
|---|---|---|
| 01010004 | 一次性注射器 | 10ml |
首先，你得找到列序号与表头（列名称）的关系
不喜欢写原生 DOM 操作，我用 jQuery 示例了
var columnMap = [];
$("table tr:first th").each(function(index) {
var $td = $(this);
columnMap[index] = $td.text();
});
// 因为第一列是 CheckBox，改其值为 ""，以便后面取数据的时候忽略
columnMap[0] = "";如果实在没有列头，也可以手工写一个映射关系出来
var columnMap = ["", "ID", "Name", "Specification"];现在来遍历表格的每一行（除标题行），把每一行转换成一个对象
var data = [];
$("table tr:not(:first)").each(function() {
data.push(convertToModel($(this)));
});其中 convertToModel 用于把一个 tr 的 jQuery 对象转换成模型，那么这个函数该怎么写呢？
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;
}最后是 jfiddle 上的示例
https://jsfiddle.net/w7rcuw8r/1/
如果你的表格不是用
<th>而是用<td>来作为表头的单元格，那么注意改写对应的选择器。另外，如果表格像示例中那样通过<thead>和<tbody>来区分了列头和内容，选择器还可以优化。
这篇关于javascript - HTML转成JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
