0

問題 1 なぜテーブルが整列しないのですか?

ここに画像の説明を入力

問題 2 ナビゲーションで戦士リストをクリックするたびに出力が次のようになるのはなぜですか

ここに画像の説明を入力

これが私のjsです

function getWarriors() {
        $.ajax({
            url: 'display_warrior.php',
            success: function(data) {
                $('#listWarriors').append(data);
            }
        });
    }

これが私のhtmlです

<article id="listWarriors">
    <h1>Warrior List</h1>
    <table>
        <tr>
            <th colspan="2">Warriors</th>
        </tr>
        <tr>
            <td>Warrior Name</td>
            <td>Warrior Type</td>
        </tr>

    </table>
</article>

そして、ここに私のphpがあります

foreach($result as $names){

$warriors['wname'] = $names['warrior_name'];
$warriors['wtype'] = $names['warrior_type'];

echo '<tr>
<td>'.$warriors['wname'].'</td>
<td>'.$warriors['wtype'].'</td>
</tr>';

}

4

2 に答える 2

2

結果は</table> try の下に追加され、ajax の成功を次のように変更します。

$('#listWarriors table').append(data);

number2 については、コンテナー (#listWarriors) によって切り詰められているのではないかと心配しています。幅が固定されているかどうか、その ID の css を確認してください...必要に応じて幅を広げてください

于 2012-09-13T02:10:52.440 に答える
1

あなたがjQueryを持っている方法では、コンテンツをテーブルではなく '' タグに追加しています。

これは、各アイテムがそのセットアップ方法で追加されるときに起こることです (ちなみに、thead タグを追加しました。テーブルのスタイルを設定し始めると便利です)

これは、ものが追加されたときの出力であり、レンダリングが間違っている理由です。

<article id="listWarriors">
    <h1>Warrior List</h1>
    <table>
        <thead>
            <tr>
                <th colspan="2">Warriors</th>
            </tr>
            <tr>
                <td>Warrior Name</td>
                <td>Warrior Type</td>
            </tr>
        </thead>

    </table>

    <tr>
         <td>the wname</td>
         <td>the wtype</td>
    </tr>
</article>

そうは言っても、jqueryを次のように変更します

$('#listWarriors table').append(data);

ところで、いくつのアイテムを追加したいですか。複数の ajax 呼び出しを行い、一度に 1 つずつ追加する場合は、JSON を介してデータを取得することをお勧めします。お手伝いできることがあればお知らせください

コメントで議論されているように、複数のアイテムを取得したいので、JSON が最適です。この方法でJSONを使用してデータを渡すことができます

** php (クエリは既に実行されていると思いますが、念のためです) **

// Make a MySQL Connection
$query = "SELECT * FROM example";//Your query to get warriors from db 

$result = mysql_query($query) or die(mysql_error());

$myWarriorsArray = array();//Where you will store your warriors

while($row = mysql_fetch_array($result)){
     $myWarriorsArray[] = $row;

     //This stores all keys for each iteration
     /*//This is teh same as the following commented code
     $myWarriorArray['warrior_name'] = row['warrior_name'];
     $myWarriorArray['warrior_type'] = row['warrior_type'];
     */
}

echo json_encode($myWarriorsArray);//This will return a json object to your ajax call

Javascript

function getWarriors() {
        $.ajax({
            url: 'display_warrior.php',
            dataType : 'json',
            success: function(data) {
                var toAppend = '';
                alert(data);
                //console.log(data);//Uncomment this to see the returned json data in browser console
                for(var i=0;i<data.length;i++){//Loop through each warrior
                     var warrior = data[i];
                     toAppend += '<tr>';
                     toAppend += '<td>'+data[i]['warrior_name']+'</td>';
                     toAppend += '<td>'+data[i]['warrior_type']+'</td>';
                     toAppend += '</tr>';
                }
                $('#listWarriors table').append(toAppend);
            }
        });
    }
于 2012-09-13T02:18:46.107 に答える