HTML 表到 JSON:包括单选按钮选中的值

Question

我有一个html表，其中有：

• 行跨度
• 合并单元格中不同组的单选按钮

该表如下所示：

<table>
<tr>
<th>Data1</th>
<th>Data2</th>
<th>Data3</th>
<th>Data4</th>
<th>Data5</th>
<th>Data6</th>
</tr>
<tr>
<td rowspan="3" contenteditable="true">
<label>
<input type="radio" value="0" name="typeOf0"> <span>Option 1</span> </label>
<br>
<label>
<input type="radio" value="1" name="typeOf0" checked=""> <span>Option 2</span> </label>
<br>
</td>
<td rowspan="3" contenteditable="true">12313</td>
<td contenteditable="true">5</td>
<td contenteditable="true">0</td>
<td contenteditable="true">0</td>
<td rowspan="3" contenteditable="true">50</td>
</tr>
<tr>
<td contenteditable="true">0</td>
<td contenteditable="true">8</td>
<td contenteditable="true">0</td>
</tr>
<tr>
<td contenteditable="true">0</td>
<td contenteditable="true">0</td>
<td contenteditable="true">3</td>
</tr>
<tr>
<td rowspan="3" contenteditable="true">
<label>
<input type="radio" value="0" name="typeOf1" checked=""> <span>Option 1</span> </label>
<br>
<label>
<input type="radio" value="1" name="typeOf1"> <span>Option 2</span> </label>
<br>
</td>
<td rowspan="3" contenteditable="true">46456</td>
<td contenteditable="true">3</td>
<td contenteditable="true">0</td>
<td contenteditable="true">0</td>
<td rowspan="3" contenteditable="true">110</td>
</tr>
<tr>
<td contenteditable="true">0</td>
<td contenteditable="true">2</td>
<td contenteditable="true">0</td>
</tr>
<tr>
<td contenteditable="true">0</td>
<td contenteditable="true">0</td>
<td contenteditable="true">9</td>
</tr>

</table>

假设有一个按钮：

<button class="btn conPhy" id="convert06Phy">Convert</button>

我想要的是，当我单击按钮时，表格应转换为如下所示的 JSON 格式，其中每行的单选按钮：

• 0 = 选中选项 1 并
• 1 = 选中选项 2

var data = [{
"Data1": 1,
"Data2": 12313,
"Data3": [5,0,0],
"Data4": [0,8,0],
"Data5": [0,0,3],
"Data6": 50
},
{
"Data1": 0,
"Data2": 46456,
"Data3": [3,0,0],
"Data4": [0,2,0],
"Data5": [0,0,9],
"Data6": 110
}];

我应该如何使用jQuery解决这个问题？

Answer 1

工作代码

jQuery(document).ready(function(){
jQuery("#convert").click(function(){
console.clear();
ths = []; // Init a dummy array to capture the headers
jQuery("#sfl th").each(function(){
let th = jQuery(this).text();
if(th){
ths.push(jQuery.trim(th)) // store the headers that will be used as key later
}
})
data = [];
var totalRows = jQuery("#sfl tr:gt(0)").length; // calculate the length of the table rows
for(var i =0; i<totalRows; i=i+3){ // run a for loop on length of the table rows with step of 3 i.e row span
temp = {}; // init a dummy object
temp[ths[0]] = jQuery("#sfl tr:eq("+(i+1)+")  td:eq(0)").find("input:checked").val(); // start with i+1 because 0 belongs to header row
temp[ths[1]] = jQuery("#sfl tr:eq("+(i+1)+") td:eq(1)").text();
// you can loop the next three using for if you want. 
values = [];
value = jQuery("#sfl tr:eq("+(i+1)+") td:eq(2)").text();
values.push(value);
for(j = 1; j < 3; j++){
value = jQuery("#sfl tr:eq("+(j+i+1)+") td:eq(0)").text();
values.push(value)
}
temp[ths[2]] = values;
values = [];
value = jQuery("#sfl tr:eq("+(i+1)+") td:eq(3)").text();
values.push(value);
for(j = 1; j < 3; j++){
value = jQuery("#sfl tr:eq("+(j+i+1)+") td:eq(1)").text();
values.push(value)
}
temp[ths[3]] = values;
values = [];
value = jQuery("#sfl tr:eq("+(i+1)+") td:eq(4)").text();
values.push(value);
for(j = 1; j < 3; j++){
value = jQuery("#sfl tr:eq("+(j+i+1)+") td:eq(2)").text();
values.push(value)
}
temp[ths[4]] = values;          
// till this
temp[ths[5]] = jQuery("#sfl tr:eq("+(i+1)+") td:eq(5)").text();

data.push(temp); get the collected data
}

console.log(data); // view the output in console.log
})
});

工作小提琴