Question

我有一个带复选框的HTML表。我希望将这些整个表转换为带有复选框的JSON数据，复选框的二进制值为'0'表示未选中，而值为'1'表示选中。

HTML代码：

<table id="sem3_table" class="w3-table w3-card w3-table-all w3-hoverable">
<thead>
<tr>
  <th>PRN NO.</th>
  <th>Name</th>
  <th>Discrete Maths</th>
  <th>ECCF</th>
  <th>Data Structures</th>
  <th>DLDA</th>
</tr>
</thead>
<tr>
  <td>1234568</td>
  <td>Smith</td>
  <td><input class="w3-check jill" type="checkbox"></td>
  <td><input class="w3-check jill" type="checkbox"></td>
  <td><input class="w3-check jill" type="checkbox"></td>
  <td><input id="select-all" class="w3-check" type="checkbox"></td>
</tr>
<tr>
  <td>7894562</td>
  <td>Jackson</td>
  <td><input class="w3-check" type="checkbox"></td>
  <td><input class="w3-check" type="checkbox"></td>
  <td><input class="w3-check" type="checkbox"></td>
  <td><input class="w3-check" type="checkbox"></td>
</tr>
<tr>
    <td>Adam</td>
    <td>Johnson</td>
    <td><input class="w3-check" type="checkbox"></td>
    <td><input class="w3-check" type="checkbox"></td>
    <td><input class="w3-check" type="checkbox"></td>
    <td><input class="w3-check" type="checkbox"></td>
</tr>
</table>

到目前为止，我已经做到了这一点，但对如何使用复选框一无所知。

JSON的JAVASCRIPT代码：

function html2json() {
    var json = '{';
    var otArr = [];
    var tbl2 = $('#sem3_table').each(function(e) {
    x = $(this).children();
    var itArr = [];
    x.each(function() {
       itArr.push('"' + $(this).text() + '"');   
    });
    otArr.push('"' + e + '": {' + itArr.join(',') + '}');
 })
 json += otArr.join(",") + '}'
 return json;
}

输出应为：

"0" : {
    "PRN NO" : "12345",
    "NAME" :   "XYZ",
    "DISCRETE MATHS" : "0",             //0=> unchecked, 1=> checked
    "ECCf" : "1",
    "Data structures" : "1",
    "DLDA"  : "0"    
 },

"1" : {
      //same//

 }

Answer 1

从不通过字符串连接构建JSON格式。首先构建对象/数组，然后将所有数据收集到其中，然后再使用JSON.stringify转换为JSON。

这是如何工作的：

function html2json() {
    var props = $.map($('#sem3_table th'), function(th) {
        return $(th).text();
    });
    return JSON.stringify($('#sem3_table tr').slice(1).map(function() {
        var obj = {};
        $(this).children().each(function(i) {
            var value = +$("input", this).prop("checked"); 
            obj[props[i]] = isNaN(value) ? $(this).text() : value;
        });
        return obj;
    }).get(), null, 2);
}

$("button").click(function() {
    const json = html2json();
    console.log(json);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Produce JSON</button>
<table id="sem3_table" class="w3-table w3-card w3-table-all w3-hoverable">
<thead>
<tr>
  <th>PRN NO.</th>
  <th>Name</th>
  <th>Discrete Maths</th>
  <th>ECCF</th>
  <th>Data Structures</th>
  <th>DLDA</th>
</tr>
</thead>
<tr>
  <td>1234568</td>
  <td>Smith</td>
  <td><input class="w3-check jill" type="checkbox"></td>
  <td><input class="w3-check jill" type="checkbox"></td>
  <td><input class="w3-check jill" type="checkbox"></td>
  <td><input id="select-all" class="w3-check" type="checkbox"></td>
</tr>
<tr>
  <td>7894562</td>
  <td>Jackson</td>
  <td><input class="w3-check" type="checkbox"></td>
  <td><input class="w3-check" type="checkbox"></td>
  <td><input class="w3-check" type="checkbox"></td>
  <td><input class="w3-check" type="checkbox"></td>
</tr>
<tr>
    <td>Adam</td>
    <td>Johnson</td>
    <td><input class="w3-check" type="checkbox"></td>
    <td><input class="w3-check" type="checkbox"></td>
    <td><input class="w3-check" type="checkbox"></td>
    <td><input class="w3-check" type="checkbox"></td>
</tr>
</table>

将复选框作为二进制值（“ 0”表示未选中，“ 1”表示已选中）转换为json数据

1 个答案: