我所使用的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>
发布于 2018-07-23 17:44:05
这与url路径有关,当进行Ajax调用时,它将页面作为一个片段注入到调用脚本文件中。你需要在当前脚本文件的头中包含CSS的位置。
https://stackoverflow.com/questions/-100005643
复制相似问题