我有一个关于 html 和 php 中的动态表的问题。我的目标是创建一个动态表，显示从 mysql 查询的数据，并将它们显示在带有复选框的表中，以便用户可以从问题库中选择问题，然后对它们执行某些操作。然而我的问题是如何显示数据。使用某种类型的mvc架构，我需要将sql保留在前端html和php部分之外。我想知道是否有人对如何从后端(mysql 查询)发布变量并通过curl 将它们发送到前端(html 和 php 部分)有任何建议，我可以在其中动态创建带有复选框的表。我尝试过使用 bootstrap 并将 sql 与 html 和 php 结合起来的解决方案。任何帮助将不胜感激。
<?php
include('ProfessorWelcome.php');
//set up mysql connection
$con = mysql_connect("localhost", "username", "password") or die(mysql_error());
//select database
mysql_select_db("username", $con) or die(mysql_error());
?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="" rel="shortcut icon">
<script type="text/javascript" language="javascript" src="tablefilter.js"></script>
<title>Registration form</title><!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- <link href="css/bootstrap-responsive.css" rel="stylesheet"> -->
<script type="text/javascript" src="cdn.datatables.net/1.10.6/css/jquery.dataTables.css"></script>
<script type="text/javascript"
src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"</script>
<script type="text/javascript" src="cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<form role="form" action="#" method="POST" name="form">
<div class="row">
<div class="col-md-12">
<div class="well">
<h2 class="text-center">Question Bank</h2>
<hr width="70%">
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th width="5%" style="visibility:hidden;" align="left"></th>
<th width="20%" align="left">Question</th>
<th width="20%" align="left">Difficulty</th>
<!-- <th width="7%" align="left">Last Name</th>
<th width="7%" align="center">Email</th>
<th width="7%" align="center">Gender</th>
<th width="7%" align="left">BirthDay</th> -->
</tr>
</thead>
<tbody>
<?php
//select all records form tblmember table
$query = 'SELECT Question, Difficulty FROM QuestionBank';
//execute the query using mysql_query
$result = mysql_query($query);
//then using while loop, it will display all the records inside the table
while ($row = mysql_fetch_array($result)) {
echo "<tr><td><input type='checkbox' name='checkbox' /></td><td>".$row['Question']."</td><td>".$row['Difficulty']."</td>";
}
?>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button type="submit" name="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
<script language="javscript" type="text/javascript">
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
</body>
</html>
最佳答案
我就是这么做的。
我添加了ob_start()和ob_flush()因此，当您创建表格时，会传输页面顶部。
已移动<title>立即关注<head>
非常重要:将 <head> 中的 CSS 移至 JS 之上
我使用了heredoc语法:PHP Manual Heredoc Syntax
已添加MYSQL_NUM至:
mysql_fetch_array($results, MYSQL_NUM))
$row[0]和$row[1]可以用在双引号字符串中，无需连接点。也可以在此处文档中使用。 $row['Question']和$row['Difficulty']不能。
您意识到与 jQuery 相关的开销吗？这个页面不需要任何JS。但是您为浏览器创建了更多工作，并且让访问者在浏览器执行所有不必要的工作时等待。
我会 86 JS 和 jQuery。并且没有 Bootstrap 。学习 CSS。
<?php ob_start("ob_gzhandler");
include('ProfessorWelcome.php');
echo <<<EOT
<html lang="en">
<head><title>Registration form</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<meta content="" name="author">
<link href="" rel="shortcut icon">
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" language="javascript" src="tablefilter.js"></script>
<!-- Bootstrap core CSS -->
<script type="text/javascript" src="cdn.datatables.net/1.10.6/css/jquery.dataTables.css"></script>
<!-- <link href="css/bootstrap-responsive.css" rel="stylesheet"> -->
<script type="text/javascript"
src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"</script>
<script type="text/javascript" src="cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
<form role="form" action="#" method="POST" name="form">
<div class="row">
<div class="col-md-12">
<div class="well">
<h2 class="text-center">Question Bank</h2>
<hr width="70%">
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th width="5%" style="visibility:hidden;" align="left"></th>
<th width="20%" align="left">Question</th>
<th width="20%" align="left">Difficulty</th>
<!-- <th width="7%" align="left">Last Name</th>
<th width="7%" align="center">Email</th>
<th width="7%" align="center">Gender</th>
<th width="7%" align="left">BirthDay</th> -->
</tr>
</thead>
<tbody>
EOT;
ob_flush();
//set up mysql connection
$con = mysql_connect("localhost", "username", "password") or die(mysql_error());
//select database
mysql_select_db("username", $con) or die(mysql_error());
//select all records form tblmember table
$query = 'SELECT `Question`, `Difficulty` FROM `QuestionBank` ';
//execute the query using mysql_query
$result = mysql_query($query);
//then using while loop, it will display all the records inside the table
while ($row = mysql_fetch_array($results, MYSQL_NUM)); {
echo "<tr><td><input type='checkbox' name='checkbox' /></td><td>$row[0]</td><td>$row[1]</td>\n";
}
echo <<<EOT
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button type="submit" name="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
<script language="javscript" type="text/javascript">
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
</body>
</html>
EOT;
ob_end_flush();
?>
关于php - 使用 PHP 在不同页面中发布变量以创建动态表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30134780/