这是我第一次在这里发帖。
我想展示实际上的样子，因为我很难用文字解释它。
以下是链接：http://handpickedph.comlu.com/index.php
这是一个为受试者分配房间和时间表的系统。
首先，我需要从选择菜单中选择一个房间名称，从数据库中显示房间名称。
正如你在那里看到的那样，我正在使用bootstrap和javascript作为按钮。
从选择菜单中选择一个房间后， 计划表自动更新。
好消息是它返回它从数据库调用的值。 我的问题是，当下表更新时，它不会显示带有它的按钮样式。
我认为这个问题与javascript或css链接的定位有关？或者我需要添加到我的代码中吗？
请帮忙。
提前致谢！
这是index.php的代码
<!DOCTYPE html>
<html>
<head>
<!--=========Start of Toggle JS===============-->
<link href="css/bootstrap-toggle.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
body{ margin: 100px;}
</style>
<!--This is the script for updating the table of schedules-->
<script type="text/javascript">
function getRoomschedTable(str)
{
if (window.XMLHttpRequest)
{
// Create the object for browsers
xmlhttp=new XMLHttpRequest();
}
else
{
// Create the object for browser versions prior to IE 7
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
// if server is ready with the response
if (xmlhttp.readyState==4)
{
// if everything is Ok on browser
if(xmlhttp.status==200)
{
//Update the div with the response
document.getElementById("details").innerHTML=xmlhttp.responseText;
}
}
}
//send the selected option id to the php page
xmlhttp.open("GET","tableresult2.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<?php
//connect to database
require_once "includes/db_connect_roomscheds.php";
//call the tables
$result = $con2->query("show tables");
?>
<?php
require_once "includes/db_connect_roomscheds.php";
$query = "SELECT * FROM sy2015";
$stmt = $con2->prepare( $query );
$stmt->execute();
//this is how to get number of rows returned
$num = $stmt->rowCount();
?>
<form action="ajazresult.php" method="post">
<select name="roomsched" onchange="getRoomschedTable(this.value)">
<option value="">Select Room:</option>
<?php
//check if more than 0 record found
if($num>0){
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
//extract row
//this will make $row['firstname'] to
//just $firstname only
extract($row);
//creating new table row per record
echo "<option>{$roomid}</option>";
}
}else{
echo "No record";
}
?>
</select>
</form>
<br>
<h4>The schedule of the selected room:</h4>
<div id="details" class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Time</th>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</thead>
<tbody>
<tr>
<td>7:00 AM - 7:30 AM</td>
<td><?php if(isset($sunday7)){echo $sunday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7sunday' value='1'>"; } ?></td>
<td><?php if(isset($monday7)){echo $monday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7monday' value='1'>"; } ?></td>
<td><?php if(isset($tuesday7)){echo $tuesday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7tuesday' value='1'>"; } ?></td>
<td><?php if(isset($wednesday7)){echo $wednesday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7wednesday' value='1'>"; } ?></td>
<td><?php if(isset($thursday7)){echo $thursday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7thursday' value='1'>"; } ?></td>
<td><?php if(isset($friday7)){echo $friday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7friday' value='1'>"; } ?></td>
<td><?php if(isset($saturday7)){echo $saturday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7saturday' value='1'>"; } ?></td>
</tr>
<tr>
<td>7:30 AM - 8:00 AM</td>
<td><?php if(isset($sunday73)){echo $sunday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73sunday' value='1'>"; } ?></td>
<td><?php if(isset($monday73)){echo $monday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73monday' value='1'>"; } ?></td>
<td><?php if(isset($tuesday73)){echo $tuesday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73tuesday' value='1'>"; } ?></td>
<td><?php if(isset($wednesday73)){echo $wednesday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73wednesday' value='1'>"; } ?></td>
<td><?php if(isset($thursday73)){echo $thursday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73thursday' value='1'>"; } ?></td>
<td><?php if(isset($friday73)){echo $friday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73friday' value='1'>"; } ?></td>
<td><?php if(isset($saturday73)){echo $saturday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73saturday' value='1'>"; } ?></td>
</tr>
</tbody>
</table>
</div>
<!--============Start of Toggle JS==================-->
<script src="js/bootstrap-toggle.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-55669452-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
这是resulttable2.php
<!--=========Start of Toggle JS===============-->
<link href="css/bootstrap-toggle.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<?php
$q = $_GET['q'];
//Connect to database
require "includes/db_connect_roomscheds.php";
//Fetch the data from tables
try {
//table selected from dropdown
//prepare query
$query = "SELECT * FROM sy2015 WHERE roomid = '$q'";
$stmt = $con2->prepare( $query );
//this is the first question mark
$stmt->bindParam(1, $_REQUEST['id']);
//execute our query
$stmt->execute();
//store retrieved row to a variable
$row = $stmt->fetch(PDO::FETCH_ASSOC);
//values to fill up our form
$sunday7 = $row['7sunday'];
$monday7 = $row['7monday'];
$tuesday7 = $row['7tuesday'];
$wednesday7 = $row['7wednesday'];
$thursday7 = $row['7thursday'];
$friday7 = $row['7friday'];
$saturday7 = $row['7saturday'];
$sunday73 = $row['73sunday'];
$monday73 = $row['73monday'];
$tuesday73 = $row['73tuesday'];
$wednesday73 = $row['73wednesday'];
$thursday73 = $row['73thursday'];
$friday73 = $row['73friday'];
$saturday73 = $row['73saturday'];
}catch(PDOException $exception){ //to handle error
echo "Error: " . $exception->getMessage();
}
?>
<div id="details" class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Time</th>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</thead>
<tbody>
<tr>
<td>7:00 AM - 7:30 AM</td>
<td><?php if(isset($sunday7)){echo $sunday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7sunday' value='1'>"; } ?></td>
<td><?php if(isset($monday7)){echo $monday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7monday' value='1'>"; } ?></td>
<td><?php if(isset($tuesday7)){echo $tuesday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7tuesday' value='1'>"; } ?></td>
<td><?php if(isset($wednesday7)){echo $wednesday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7wednesday' value='1'>"; } ?></td>
<td><?php if(isset($thursday7)){echo $thursday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7thursday' value='1'>"; } ?></td>
<td><?php if(isset($friday7)){echo $friday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7friday' value='1'>"; } ?></td>
<td><?php if(isset($saturday7)){echo $saturday7;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='7saturday' value='1'>"; } ?></td>
</tr>
<tr>
<td>7:30 AM - 8:00 AM</td>
<td><?php if(isset($sunday73)){echo $sunday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73sunday' value='1'>"; } ?></td>
<td><?php if(isset($monday73)){echo $monday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73monday' value='1'>"; } ?></td>
<td><?php if(isset($tuesday73)){echo $tuesday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73tuesday' value='1'>"; } ?></td>
<td><?php if(isset($wednesday73)){echo $wednesday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73wednesday' value='1'>"; } ?></td>
<td><?php if(isset($thursday73)){echo $thursday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73thursday' value='1'>"; } ?></td>
<td><?php if(isset($friday73)){echo $friday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73friday' value='1'>"; } ?></td>
<td><?php if(isset($saturday73)){echo $saturday73;}else{echo "<input type='checkbox' data-toggle='toggle' data-onstyle='success' data-on='Reserved' data-off='Available' name='73saturday' value='1'>"; } ?></td>
</tr>
</tbody>
</table>
</div>
<!--============Start of Toggle JS==================-->
<script src="js/bootstrap-toggle.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-55669452-1', 'auto');
ga('send', 'pageview');
</script>
答案 0 :(得分：0)
Htennek 我调试了代码，发现在从下拉列表'
中选择后，你已经将两个相同的ID传递给了div<div id="details">
<div id="details" class="table-responsive">'
。请检查你知道为什么你的风格消失了。
答案 1 :(得分：0)
当您在下拉框中更改主题时，您的JavaScript无法启动
我建议您手动添加代码以更改此行下面的复选框的样式
//Update the div with the response
document.getElementById("details").innerHTML=xmlhttp.responseText;
请检查该
的'bootstrap-toggle'插件的文档此致 sora021