Question

我正在使用把手来编译并从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转换回对象？

Answer 1

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

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

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

Answer 2

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

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

以及以下结果：

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

cell1，cell2哪个为空，哪个包含</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 ...}

Answer 3

也许你可以使用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));

HTML到JS对象

3 个答案: