javascript - 使用 jQuery 和 Ajax 加载 PHP 回显表格时看不到表格边框

标签 javascript php jquery mysql ajax

所以我正在学习如何使用 jQuery、PHP、AJAX 和 MySQL。我想从 MySQL 服务器获取一个表并显示它。为此,我有 2 个 PHP 文件,第一个是登录 MySQL 数据库并回显 html 表的服务器端文件,第二个是用户看到的 index.php 文件。我使用 jQuery 的 ajax 加载方法在单击按钮时更新页面,并返回服务器端 PHP 的 echo'ed 表。当我这样做时,表格的边框永远不会加载。有人可以帮我解决这个问题吗? 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();

脚本.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;
}

最佳答案

如评论中所述,从表的 ID 中删除 #:

 echo "<table id  = 'pets'>   

然后添加以下 CSS

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

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

关于javascript - 使用 jQuery 和 Ajax 加载 PHP 回显表格时看不到表格边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28818203/

相关文章:

javascript - 使用xpath从json对象快速检索数据

javascript - Magento Paypalplus - 通过 PHP 停用付款方式

php - 不使用 CURL 发送 GET 请求

javascript - 使用 jquery ajax 从 Bootstrap 3 模态形式获取数据

javascript - 两个动画同时运行jquery

javascript - Python/Flask/HTML - 在新窗口而不是主页中呈现 HTML

php - 如何删除 WordPress 中更改 'Site Icon' 的功能?

php - 使用手动 where 语句的具有多个更新条件的 Codeigniter 模型

javascript - div 的 onscroll 函数不适用于 getBoundingClientRect() 方法

JQuery 数据表行高