嵌套表，嵌套td子表，没有Json头

Question

你好，我需要帮助转换为JSON

<table>
<thead>
<tr >
<th class="product-remove">&nbsp;</th>
<th class="product-thumbnail">&nbsp;</th>
<th class="product-name">Product</th>
<th class="product-price">Price</th>
<th class="product-qty">Quantity</th>

</tr>
</thead>
<tbody>
<tr class="cart_item">
<td>
<a href=""class="prod">3way Connector Cable</a>
<a href=""class="cat">Tech</a>
<a href="" class="code">1245</a>
</td>
<td>
<span class="price">14.99</span>
</td>
<td>
<span class="qty">2</span>
</td>
</tr>
<tr class="cart_item">
<td>
<a href=""class="prod">Red Shirt</a>
<a href=""class="cat">Clothes</a>
<a href="" class="code">5431</a>
</td>
<td>
<span class="price">10.99</span>
</td>
<td>
<span class="qty">1</span>
</td>
</tr>
</tbody>
</table>
<input id="btnTableToJson" type="button" value="To JSON" />
my code so far 
function CreateJson() {

var quoteDetails = [];
var $headers =  $("thead tr").find("th.product-name, th.product-price, th.product-qty"); 
//console.log($headers);
var $rows = $("tbody .cart_item").each(function(index) {
$cells = $(this).find(".prod,.price, .qty");
quoteDetails[index] = {};

//console.log(quoteDetails[index]);
$cells.each(function(cellIndex) {
quoteDetails[index][$($headers[cellIndex]).html()] = $(this).html();
});    
});
var myObj = {};
myObj.quoteDetails = quoteDetails;
console.log(quoteDetails)
console.log(JSON.stringify(myObj));
results 
{"quoteDetails":

[{"产品";3路连接器电缆";价格";14.99";数量";;2"}，{"Product"红色Shirt","Price":"10.99","Quantity":"1"}]}

但我需要所有的添加到json作为key:pair，像这样:

{"quoteDetails"[{"产品";3路连接器电缆"价格";14.99"数量";2";类别";技术";代码";1245"]{"产品";红衬衫"价格";10.99";数量";1";类别";服装";代码";;5431"}}]}挑战其他剩下的一个标签没有头，他们需要通过循环并添加到每个json对象我没有太多的自由来改变表格的结构。请帮助我如何做那些

Answer 1

这是一个香草风味的解决方案，它提供了您指定的输出。它使用硬编码的fields对象，该对象告诉脚本要查找什么类名来填充JSON对象的每个字段(prod用于Product,cat用于category，等等)

或者(如果头名称不能保证是Product,Price和Quantity)，您可以使用类名作为键并动态查找头名称(例如$("thead tr").find(myClassName)).html())。

const
fields = {
"Product": "prod",
"Price": "price",
"Quantity": "qty",
"category": "cat",
"code": "code"
},
rows = document.getElementsByTagName("tbody")[0].getElementsByClassName("cart_item"),
btn = document.getElementById("btnTableToJson");
btn.addEventListener("click", createJson);
function createJson() {  
const quoteDetails = [];
// Loops through TR elements, defining a corresponding `item` object for each row
for(let row of rows){
const item = {};
// Loops through field names, replacing the className with the actual value for this TR
for(let field of Object.keys(fields)){
const className = fields[field];
item[field] = row.getElementsByClassName(className)[0].innerHTML;
}
// The item representing this row now holds the correct values -- adds it to the array
quoteDetails.push(item);
}
// Makes the array into an object property called `quoteDetails` and prints the object
console.log(JSON.stringify({quoteDetails}));
}

<table>
<thead>
<tr>
<th class="product-remove">&nbsp;</th>
<th class="product-thumbnail">&nbsp;</th>
<th class="product-name">Product</th>
<th class="product-price">Price</th>
<th class="product-qty">Quantity</th>
</tr>
</thead>
<tbody>
<tr class="cart_item">
<td>
<a href="" class="prod">3way Connector Cable</a>
<a href="" class="cat">Tech</a>
<a href="" class="code">1245</a>
</td>
<td>
<span class="price">14.99</span>
</td>
<td>
<span class="qty">2</span>
</td>
</tr>
<tr class="cart_item">
<td>
<a href="" class="prod">Red Shirt</a>
<a href="" class="cat">Clothes</a>
<a href="" class="code">5431</a>
</td>
<td>
<span class="price">10.99</span>
</td>
<td>
<span class="qty">1</span>
</td>
</tr>
</tbody>
</table>
<input id="btnTableToJson" type="button" value="To JSON" />