2

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

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

ETC

<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>

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

4

3 回答 3

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
于 2013-08-26T14:32:17.670 回答
0

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

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 规范id，您为每组元素声明的重复属性是无效的。option

(id) 此属性为元素分配名称。此名称在文档中必须是唯一的。

于 2013-08-26T15:52:48.130 回答
0

这几乎是Html 表到 json 数组的完全相同的副本。其中，提问者有一个输入字段的 HTML 表。HTML 表格是动态的，其中可以有任意数量的行和列的输入。

该解决方案将整个包装<table>在 a<form>中，对该形式进行序列化，然后循环序列化以将其转换为更理想的格式。

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

于 2013-08-27T16:09:17.347 回答