2

選択ボックスを含む次のテーブルがあり、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>

編集：インクルードファイルを削除しました。いくつかのテストのために使用されました:

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

これは、 Html table to array of jsonのほぼ正確な複製です。その中で、アスカーには入力フィールドの HTML テーブルがあります。HTML テーブルは動的であり、入力を含む任意の数の行と列が存在する可能性があります。

ソリューションは、全体<table>を でラップし、その<form>フォームをシリアル化し、シリアル化をループして、より望ましい形式に変換します。

コードにいくつかの問題があります。<option>タグの ID が重複する可能性がありますが、これは悪いことです。また、 を閉じる</tbody>前に を閉じています</tr>が、これも間違っています。

于 2013-08-27T16:09:17.347 に答える
0

.val()各要素の jQuery ホスト オブジェクトで関数を使用してselect、選択した要素の初期値を取得しましたoption。属性を指定していないため、各要素valueの初期値は要素のコンテンツに設定されます ( HTML 4.01 仕様から)。option

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の各セットに対して宣言している重複した属性は、 HTML 仕様optionに従って無効です。

(id) この属性は、要素に名前を割り当てます。この名前はドキュメント内で一意である必要があります。

于 2013-08-26T15:52:48.130 に答える