3

PHP ページによって既に生成されている JSON オブジェクトを使用して html テーブルを作成する際に問題が発生しています。

Fname、Lname、Ext、Rm を含むスプレッドシートから JSON オブジェクトを作成しています。

私のjson.php Webページは私にこの結果を与えます:

[{"fName":"John","lName":"Doe","Ext":"#666","Rm":"C3","id":0},{"fName":"Abraham","lName":"Lincoln","Ext":"#917","Rm":"C1","id":1}]

だから今、私はjqueryを使ってこのデータでテーブルを埋めるhtmlページを構築しようとしています。これが私のindex.htmlにあるものです：

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
    </script>
</head>
<body>
<div id="stuff"
<table id="userdata" border="1">
    <thead>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Ext</th>
        <th>Room</th>
    </thead>
    <tbody></tbody>
</table>
</div>

<script>
$(document).ready(function(){
    $("#userdata tbody").html("");
    $.getJSON("json.php", function(data){
            $.each(data.members, function(i,user){
                var tblRow =
                    "<tr>"
                    +"<td>"+user.fName+"</td>"
                    +"<td>"+user.lName+"</td>"
                    +"<td>"+user.Ext+"</td>"
                    +"<td>"+user.Rm+"</td>"
                    +"</tr>"
                $(tblRow).appendTo("#userdata tbody");
            });
        }
    );
});
</script>

編集:次のコードで私の解決策を見つけました:

<?php
$json = file_get_contents('collab.json.php');
$data = json_decode($json,true);

echo '<table>';
echo '<tr><th>Username</th><th>Period</th><th>Room</th><th>Next?</th></tr>';

$n = 0;

foreach ($data as $key => $jsons) {
    foreach ($jsons as $key => $value) {
        echo '<tr>';
    echo '<td>'.$data[$n]['username'].'</td>';
    echo '<td>'.$data[$n]['period'].'</td>';
    echo '<td>'.$data[$n]['Rm'].'</td>';
    echo '<td>'.$data[$n]['next'].'</td>';
    echo '</tr>';

    $n++;
} 
}
echo '</table>';
?>

</html>
4

2 に答える 2

1

あなたが提供したjsonがあなたからの唯一の出力であると仮定すると、json.phpこの行をわずかに変更する必要があります:

$.each(data.members, function(i,user){

これに：

$.each(data, function(i,user){
于 2013-08-13T22:52:15.327 に答える
0

通常、このような状況では、アイテムを配列に追加してから、配列を結合して追加します。たとえば、あなたのそれぞれで。

tblRow = [
  '<tr>',
    '<td>' + user.fName + '</td>',
    '<td>' + user.lName + '</td>',
    '<td>' + user.Ext + '</td>',
    '<td>' + user.Rm + '</td>',
  '</tr>',
].join('\n');

myArray.push(tblRow);

myArray はループ外の空の配列であり、ループの後に配列の内容をテーブルに追加します。

お役に立てれば！

于 2013-08-13T22:55:58.553 に答える