为什么当从另一个php页面调用Ajax时,CSS无法工作?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (83)

我所使用的php页面可以很好地使用我应用的CSS。但是,当我使用Ajax从另一个php页面调用此页面时,CSS在该页面上不起作用。原因是什么?我如何解决这个问题?

注意:我用下面的php代码更新了我原来的问题。

<html>
<head>
 <style>
.tbrep {
    border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    border-collapse:collapse; 
    width: 8%;
    margin: 8px; 
    float: left;
    margin-left:25px; 
} 
.tbrep td {
    padding: 2px; 
    margin: 2px;
    border: 1px solid #ccc;
    text-align: center;
    height:15px;
    width: 10px;  
    white-space: nowrap;
}
.tbrep th {
    background-color: whitesmoke; 
    color:rosybrown;
    border: 1px solid #ccc;
    font-weight: bold;
    width: 10px;  
    white-space: nowrap;
}

td[data-content="1"]{
  background-color: #f7b7e9 ;
}

td[data-content="2"]{
  background-color: #98ade0;
}

</style>
<script type="text/javascript" src="etc/jquery-2.1.4.js"></script>
<script>
$(function(){
  $("td").each(function(){
    var $this = $(this);
    $this.attr("data-content", $this.text());
  });
});
</script>
</head>
<body>

 <table class="tbrep">
 <tr>

  <th>RDA</th> 
  <th>RDB</th>

   </tr>


 <?php

  include ("config.php");


  $sql = "SELECT RDA, RDB FROM stats";
  $result = $conn->query($sql);
  if ($result->num_rows > 0) {

  $counter = 3;

   while($row = $result->fetch_assoc()) 
   {
        echo "<tr><td>" . $row["RDA"] . "</td><td>" . $row["RDB"]. "</td></tr>";


            $counter++;
            if($counter % 33 == 0) { ?>
</table>

<table class="tbrep">
<tr>

  <th>RDA</th> 
  <th>RDB</th>

   </tr>

            <?php }
    }
echo "</table>";

} else { echo "0 results"; }
$conn->close();
?>     
</table>        


    </body>
</html>

我的Ajax代码如下:

 <script>  
   document.getElementById('actbutton1').onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "formquery.php", true);

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("querydiv").innerHTML = xhr.responseText;
                }
            }
            xhr.send();
        }
    </script>
提问于
用户回答回答于

这与url路径有关,当进行Ajax调用时,它将页面作为一个片段注入到调用脚本文件中。你需要在当前脚本文件的头中包含CSS的位置。

扫码关注云+社区

领取腾讯云代金券