使用选择框将 HTML 表转换为 JSON

Posted 2023-03-05

技术标签:

【中文标题】使用选择框将 HTML 表转换为 JSON【英文标题】：Convert HTML Table to JSON with Selectboxes 【发布时间】：2013-08-28 22:52:03 【问题描述】：

我有下表，其中包含选择框，我想创建一个 JSON 字符串。我尝试了几个代码 sn-ps 但没有一个给我正确的输出。我想要的输出应该是：

id[0]: start time: 12:34;end time: 15:00
id[1]: start time: 18:14;end time: 18:17

等

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script language="javascript">

function addRowEntry(tableID)
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[1].cells.length;
        for(var i=0; i<colCount; i++) 
            var newcell = row.insertCell(i);
            newcell.innerhtml = table.rows[1].cells[i].innerHTML;
        
      



</script>

<table id="dynTable" name="dynTable" border=0 > 
<thead>
<tr  id="header">

    <td class="datacell"  align="center">Heure Start</td>

    <td class="datacell"  align="center">Min Start</td>
    <td class="datacell"  align="center">Heure End</td>

    <td class="datacell"  align="center">Min End</td>
    <td class="datacell" ><input type="button" value="Ajouter" name="add" id="add" style="width:50px" onclick="addRowEntry('dynTable');"/></td>
</tr>
</thead>    
<tbody>
<tr id="TimeSel">
<td class="datacell" >
    <select id="openH" name="openH">
        <option></option>
        <?php 
            for ($i=0;$i<24;$i++) 
                echo "<option id=$i>";
                echo $i;
                echo "</option>";
            
        ?>
    </select>
</td>

<td class="datacell" >
    <select id="openM" name="openM">
        <option></option>
        <?php 
            for ($i=0;$i<60;$i++) 
                echo "<option id=$i>";
                echo $i;
                echo "</option>";
            
        ?>
    </select>
</td>
<td class="datacell" >
    <select name="closeH" id="closeH">
        <option></option>
        <?php 
            for ($i=0;$i<24;$i++) 
                echo "<option id=$i>";
                echo $i;
                echo "</option>";
            
        ?>
    </select>
</td>

<td class="datacell" >
    <select name="closeM" id="closeM">
        <option></option>
        <?php 
            for ($i=0;$i<60;$i++) 
                echo "<option id=$i>";
                echo $i;
                echo "</option>";
            
        ?>
    </select>
</td>
</tbody>
</tr>

</table>

<input type="button" id="AddDateTime" name="AddDateTime" value="OK" onclick="tableToJson('dynTable');"></input>

编辑：我删除了包含文件。为一些测试感到高兴：

【问题讨论】：

您是否也只想像Heure Start那样选择框或文本？你包含 jquery 但你不使用它。感谢您的回答，我想要一个 json 字符串，如下所示：id[0]：开始时间：12:34；结束时间：15:00 id[1]：开始时间： 18:14；结束时间：18:17 你希望它是 JSON，还是像你的问题一样被格式化？您所描述的不是有效的 JSON。 JSON 看起来像 ["start time": "12:34", "end time": "15:00", "start time": "18:14", "end time": "18:17"] 【参考方案1】：

使用

var val=JSON.stringify(value);

在 for 循环中捕获数组的每个元素，同时您正在遍历表。这样您就可以自动获得所需的 JSON 格式的输出。

编辑：（使用 jQuery）：

var myRows = [];
var $headers = $("th");
var $rows = $("tbody tr").each(function(index) 
  $cells = $(this).find("td");
  myRows[index] = ;
  $cells.each(function(cellIndex) 
    myRows[index][$($headers[cellIndex]).html()] = $(this).html();
  );    
);

var myObj = ;
myObj.myrows = myRows;
alert(JSON.stringify(myObj)); // to test the output

【讨论】：

谢谢乔治，但这是我的问题......我如何循环遍历一个表并获得选择选项？查看我上面的编辑，希望有帮助，从这里获取循环代码***.com/questions/9927126/… 嗨乔治，感谢您的帮助，我尝试了您的代码，但它为我提供了所有选择框的 html 代码，而不是所选选项【参考方案2】：

我在 jQuery 宿主对象上为每个 select 元素使用了 .val() 函数来获取所选 option 元素的初始值。由于您没有指定value 属性，因此每个option 元素的初始值都设置为元素的内容（来自HTML 4.01 Spec）。

JavaScript

function getJSONfromTable(tableID) 

  var res = [];

  // function now expects an id string passed
  $('tbody tr', '#' + tableID).each(function() 
    var $this = $(this);

    res.push(
      'openH' : parseInt($this.find('#openH').val(), 10),
      'openM' : parseInt($this.find('#openM').val(), 10),
      'closeH': parseInt($this.find('#closeH').val(), 10),
      'closeM': parseInt($this.find('#closeH').val(), 10)
    );
  );

  return JSON.stringify(res);



// Example
var json = getJSONfromTable('dynTable');

// Returns (example):
//=> "["openH":1,"openM":3,"closeH":6,"closeM":24, "openH":4,"openM":2,"closeH":12,"closeM":19]"

建议

您可能会或可能不会对此感到困扰，但根据HTML spec，您为每组option 元素声明的重复id 属性无效。