Question

问题1为什么我的桌子不对齐？

enter image description here

问题2为什么每次我在导航栏中点击我的战士列表时输出就像这样

enter image description here

这是我的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>';

}

Answer 1

结果附在</table>下尝试将你的ajax成功改为：

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

对于number2，我很害怕它被容器截断（#listWarriors）.. 如果宽度是固定的，请检查你的css是否已经固定...请随意扩大

Answer 2

您拥有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);
            }
        });
    }

为什么我使用html / jquery / php输出问题

2 个答案: