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

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> 

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

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}]" 

一个建议

您可能会或可能不会被此困扰，但id属性你宣布为每套option元素的副本根据无效HTML spec。

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

Answer 3

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

solution将整个<table>封装在<form>中，将该表单序列化，然后循环遍历序列化以将其置换为更期望的格式。

与您的代码的一些问题，您将有<option>标记的重复ID，这是不好的。此外，在关闭</tr>之前，您正在关闭您的</tbody>，这也是错误的。