Question

所以我正在学习如何使用jQuery，PHP，AJAX和MySQL。我想从MySQL服务器获取一个表并显示它。为此，我有2个PHP文件，一个是登录到MySQL数据库并回显一个html表的服务器端文件，另一个是用户看到的index.php文件。我使用jQuery的ajax加载方法在单击按钮时更新页面，并返回服务器端PHP的echo表。当我这样做时，表的边框永远不会被加载。有人可以帮我这个吗？ Screen Shot

indexTest.php（连接到MySQL服务器/服务器端的php文件）：

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
else {
$sql = "select name, species from pet";
$result = $conn->query($sql);
$counter = mysqli_num_rows($result);
    if ($counter > 0) {
        echo "<table id  = 'pets'>
        <tr>
        <td><strong>names</strong></td>
        <td><strong>species</strong></td>
        </tr>";
    while ($row = mysqli_fetch_array($result)) {
        echo "<tr>";
        echo "<td>" . $row['name'] . "</td>";
        echo "<td>" . $row['species'] . "</td>"; 
        echo "</tr>";
    }
    echo "</table>";

    }
}
$conn->close();

的script.js：

$(document).ready(function(){
        $("button").click(function(){
            $("#fromAjax").load("indexTest.php", true);
        });
});

index.php（我正在加载表中的那个！）：

<!DOCTYPE html>
<html>
    <head>
        <script src='jQuery-2.1.3.js'></script>
        <script type='text/javascript' src='script.js'></script>
        <link rel = "stylesheet" href = "stylesheet.css" type = "stylesheet/css"></link>
    </head>
    <body>

        <div id="myDiv"><p id = "fromAjax">This will be replaced with the Table</p></div>
        <button>Change Content</button>
    </body>
</html>

我的CSS：

*{
    font-family; "Impact", "Times New Roman";
}
#fromAjax{
    color: red;
}
#pets{
    color: blue;
    border: 5px solid black;
}

Answer 1

如同在提到的评论中一样，从表格的ID中删除＃：

 echo "<table id  = 'pets'>

然后添加以下CSS

#pets td{ border: 5px solid pink; }

你的桌子上应该有一个边框:-)

使用jQuery和Ajax加载PHP echo'ed表时看不到表边框

1 个答案: