php - 如何根据选择选项更改表数据

我试图获得一些帮助，从我们的数据库中获取产品属性，并使用所述属性填充表行，所有这些都基于选择选项。

我有一个 html 表格，只有一行，标题是:

SKU
项目描述
立方米
数量
价格
净价

唯一填充的表格单元格是“SKU”，它有一个从我们的数据库中提取选项的选择菜单。 table 的其余部分是空的。我想要完成的是从我们的数据库 WHERE sku = 'the value of the select option' 中提取表数据，并填充 html 表的其余部分。因此，基于“sku”选择，我们需要能够使用“商品描述”、“立方米”和“价格”动态填充 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;    
}

最佳答案

在您的选项中，您仅显示 sku，但您还必须设置值属性。否则，当您提交表单时，所选项目的值属性为空。

echo '<option value="' . $row['sku'] . '">'.$row['sku'].'</option>'

关于php - 如何根据选择选项更改表数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41228425/

php - 如何根据选择选项更改表数据

上一篇：mysql - 将数据库上传到我的服务器时出现错误。 SQL 错误#1064

下一篇：php - 获取特定页面 ID 的唯一访客计数 - php