【发布时间】：2016-12-29 01:36:50
【问题描述】：
我正在尝试从我们的数据库中获取产品属性，并使用所述属性填充表格行，所有这些都基于一个选择选项。
我有一个 html 表格，只有一行，标题是：
- SKU
- 物品说明
- 立方米
- 数量
- 价格
- 净价
唯一填充的表格单元格是“SKU”，它有一个从我们的数据库中提取选项的选择菜单。桌子的其余部分是空的。我想要完成的是从我们的数据库 WHERE sku = 'the value of the select option' 中提取表数据，并填充 html 表的其余部分。所以基于“sku”的选择，我们需要能够用“Item Description”、“Cubic Meters”和“Price”动态填充html表格。
这里是表单页面form.php：
<html>
<head>
<link href="ERP/styles/check_cs6.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
//add row function
function onClickAdd() {
var tableRow = document.getElementById("tableRow");
var tableRowClone = tableRow.cloneNode(true);
tableRow.parentNode.insertBefore(tableRowClone, tableRow.nextSibling);
}
</script>
<script>
//fetch data
function showProd(str) {
if (str == "") {
document.getElementById("txt").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("prodName").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getprod.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<div id="left_column">
<h1>Purchase Order Form</h1>
<p>Supplier:
<select name="supplier">
<option value="#">Dave</option>
<option value="#">Dude</option>
</select>
</p>
</div>
<div id="right_column">
<p>Date: <input type='text' size='6' maxlength='10' /></p>
<br>
<p>Ship To This Address:</p>
<p>123 Fake Street</p>
<p>Plaza</p>
<p>Springfield, Simpsons</p>
</div>
<br>
<div id="POform">
<p class="alignLeft">Ship Date: <input type="text" size='6' maxlength='10'></p>
<p class="alignRight">PO No.: <input type="text" size="6" maxlength="10"></p>
</div>
<table id="myTable" width="100%">
<tr>
<th>SKU</th>
<th>Item Description</th>
<th>CBM</th>
<th>Qty</th>
<th>Unit Price</th>
<th>Net Price</th>
</tr>
<tr id="tableRow">
<td width ="10%">
<select name="users" onchange="showUser(this.value)">
<?php
$connection = mysql_connect('address', 'user', 'pw');
mysql_select_db('ADI');
$sql = mysql_query("SELECT sku FROM inventory");
while ($row = mysql_fetch_array($sql)){
echo "<option>". $row['sku'] . "</option>";
}
?>
</select>
</td>
<td width ="50%" id="prodName">
</td>
<td width = "10%" id="cbm"></td>
<td width = "10%" id="qty"><input type="text" size="5"></td>
<td width = "10%" id="cost"></td>
<td width = "10%" id="netCost"></td>
<!--Delete Function doesn't work-->
<!--<td><input type="button" value="Delete" onclick="deleteRow ('myTable',0)"></td>-->
</tr>
<p>
<input type="button" name="addButton" value="Add Item" onClick="Javascript:onClickAdd()">
</p>
</table>
<br>
<!--<div id="txtHint"><b>info will be listed here...</b></div>-->
</body>
</html>
这是表单处理程序页面getprod.php：
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = $_GET['q'];
$con = mysqli_connect('localhost','root','','ADI');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ADI");
$sql="SELECT prodName, sku, cbm, cost FROM inventory WHERE sku = '".$q."'";
$result = mysqli_query($con,$sql);
/*
echo "<table width=100%>
<tr>
<th>SKU</th>
<th>Item Description</th>
<th>CBM</th>
<th>Qty</th>
<th>Unit Price</th>
<th>Net Amount</th>
</tr>";*/
while($row = mysqli_fetch_array($result)) {
// echo "<tr>";
//echo "<td>" . $row['sku'] . "</td>";
echo "<td>" . $row['prodName'] . "</td>";
//echo "<td>" . $row['cbm'] . "</td>";
//echo "<td>" . $row['qty'] . "</td>";
//echo "<td>" . $row['cost'] . "</td>";
//echo "<td>" . $row['amt'] . "</td>";
//echo "</tr>";
}
mysqli_close($con);
?>
</body>
</html>
如果这有助于格式化，这里是 CSS：
@charset "utf-8";
#container {
width: 968px;
background: #FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}
#left_column{
margin-left: 40px;
float: left;
}
#right_column{
margin-right: 100px;
float: right;
}
#header h1 {
color: #FF0000;
font-size: 96px;
font-family: sarina, serif;
margin: 0;
float: left;
}
#header {
color: #FFF;
background-color: #C8C6C6;
height: 100px;
position: relative;
}
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #3B3B3B;
background-color: #FFF;
margin: 0px;
}
#header h2 {
color: #FF0000;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 30px;
font-variant: small-caps;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 15px;
}
#header a {
font-size: 20px;
font-weight: bold;
font-variant: small-caps;
color: #FFF;
text-decoration: none;
text-align: center;
width: 100px;
display: block;
}
#header ul {
margin: 0px;
padding: 0px;
list-style-type: none;
position: absolute;
right: 0px;
bottom: 0px;
}
#main_text {
background-color: #FFF;
width: 300px;
position: absolute;
right: 60px;
bottom: 60px;
}
#header li {
float: left;
}
#addProduct {
margin-left: 125px;
}
#inventory {
margin-left: 20px;;
}
#purchaseOrders {
}
a.createNew {
float: right;
}
#POform{
margin-top: 250px;
}
p.alignRight{
float:right;
margin-right: 100px;
}
p.alignLeft{
float:left;
margin-left: 40px;
}
#items {
margin-top: 325px;
margin-left: 40px;
margin-right: 100px;
}
.POinput{
width: 50px;
float: right;
}
#items th{
text-align:center;
border-bottom: 1px dotted;
height: 20px;
}
#total{
margin-left: 100px;
margin-right: 100px;
}
【问题讨论】：
-
我希望这只是您尝试做的一个示例，我强烈建议您不要将查询和数据库连接放在同一个 php 文件中。如果你使用 JQuery 和 Laravel 之类的 php 框架，你的生活会更轻松。希望您的项目取得成功。