HTML到JS对象

时间:2013-11-16 08:28:06

标签: javascript html dom handlebars.js

我正在使用把手来编译并从JS对象获取html。是否可以将(html)转换回JS对象(使用把手或任何其他库)?更确切地说;使用把手,我有以下模板:

<tr>
 <td>{{qty}}</td>
 <td>{{rate}}</td>
 <td>{{gstPerc}}</td>
 <td>{{discountPerc}}</td>
 <td>{{amount}}</td>
</tr>

并遵循JS Object:

{
    qty : 12,
    rate : 1000,
    gstPerc : 10,
    discountPerc : 2,
    amount: 1500
}

在使用把手进行编译后,它会转换为简单的html,例如跟随。

<tr>
 <td>12</td>
 <td>1000</td>
 <td>10</td>
 <td>2</td>
 <td>1500</td>
</tr>

现在我想知道的是,是否有可能(使用把手)将给定的HTML转换回对象?

3 个答案:

答案 0 :(得分:2)

给出数据名称为数量,速率等

var obj = getElementsByTagName('td');
$data   = {};
for(var i=0;i<obj.length;i++)
{
   $data[obj[i].dataset.name]  = obj[i].innerHtml;
}

您可以执行要使用对象数据填充表的反向过程 您可以使用jqgrid之类的网格控件来轻松集成

答案 1 :(得分:1)

对于任意模板和值,这是不可能的。请考虑以下模板:

<td>{{cell1}}</td><td>{{cell2}}</td>

以及以下结果:

<td></td><td></td><td></td>

cell1cell2哪个为空,哪个包含</td><td>

如果您知道插入的HTML有效并且您事先知道模板,那么这很容易。对于您的特定模板:

var table = document.createElement("table")
table.innerHTML = input
var tds = table.rows[0].cells
return {qty: tds[0].innerHTML, rate: tds[1].innerHTML ...}

如果您知道插入的值应该是数字,您可以将它们转换为:

return {qty: +tds[0].innerHTML, rate: +tds[1].innerHTML ...}

答案 2 :(得分:0)

也许你可以使用jQuery并最终得到像this

这样的东西

在您的模板中:向<td>元素添加类:

<table>
<tr id='someId'>
 <td class='qty'>12</td>
 <td class='rate'>1000</td>
 <td class='gstPerc'>10</td>
 <td class='discountPerc'>2</td>
 <td class='amount'>1500</td>
</tr>
</table>

再次创建对象:

var myObj = {};
$("#someId td").each(function() {
    var td = $(this);
    myObj[td.attr("class")] = td.text();
});

alert(JSON.stringify(myObj));