Question

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

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 width="200px"> 
<thead>
<tr height="50" 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>

编辑：我删除了包含文件。是为了一些测试：

Answer 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

Answer 2

我在每个.val()元素的jQuery主机对象上使用了select函数来获取所选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，您为每组id元素声明的重复option属性无效。

（id）此属性为元素指定名称。该名称在文档中必须是唯一的。

Answer 3

这几乎是Html table to array of json的完全重复。其中，提问者有一个输入字段的HTML表。 HTML表是动态的，可以有任意数量的带有输入的行和列。

solution将整个<table>包裹在<form>中，序列化该表单，然后遍历序列化以将其置于更理想的格式。

您的代码存在一些问题，您的<option>代码会有重复的ID，这很糟糕。此外，在关闭</tbody>之前，您正在关闭</tr>，这也是错误的。

使用Selectboxes将HTML表格转换为JSON

3 个答案: