Html 表到 JSON：包括单选按钮检查值答案

【问题标题】：Html table to JSON : including radio button checked valuesHtml 表到 JSON：包括单选按钮检查值
【发布时间】：2020-03-25 00:57:58
【问题描述】：

我有一个 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>

假设有一个按钮：

&lt;button class="btn conPhy" id="convert06Phy"&gt;Convert&lt;/button&gt;

我想要的是，当我单击按钮时，表格应转换为如下所示的 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 解决这个问题？

【问题讨论】：

我们总是乐于帮助和支持新的编码员，但您需要先帮助自己。在doing more research 之后，如果您有任何问题，请发布您尝试过的内容，并清楚说明什么不起作用并提供a Minimal, Complete, and Verifiable example。阅读'How to Ask a good question' guide、Question Do's and Don'ts和take the tour
我知道在我正确帮助你之前，啊算了，但请务必先尝试或发布你已经完成的代码。
@RoryMcCrossan 你是对的。在提出问题之前应该进行适当的研究。我已经浏览了这个库github.developerdan.com/table-to-json，但是这个库的所有者说它无法将表格转换为 JSON，包括单选按钮。这就是我在这里问的原因。
@AhmedAli 我正在努力，Bhai。尝试了这个github.developerdan.com/table-to-json，但无法理解我应该如何添加对随机单选按钮的支持。
我希望，我会帮助你，但我猜你不希望 col-span 取决于json。我只会这样做 json 将创建单选按钮组并选择选中。

标签： javascript jquery html json html-table

【解决方案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
  })

});

Working Fiddle

【讨论】：