HTML to JS Object

Question

我正在使用车把来编译并从JS对象获取html。是否可以将（html）转换回JS对象（使用车把或任何其他库）？更准确地说;使用车把，我有以下模板：

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

和以下 JS 对象：

{
    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 并最终得到这样的东西

在模板中：将类添加到<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));