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> 尝试将您的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 调用并一次附加一个内容，我建议您通过 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 回答