1. 在数据库中创建一个“零件”表,包含零件ID,分类ID,零件名称和价格等字段。
2. 创建另外一个“分类”表,包含分类ID和分类名称等字段。
3. 使用PHP代码,从数据库中查询所有的分类信息,并将其存储在一个数组中。
4. 在HTML页面中,使用下拉菜单显示所有的分类列表。每个旁闭下拉项的值是其对应的分类ID。
5. 当用户选择某个分类时,使用Ajax自动提交表单,向后台PHP文件发送请求,获取该分类下的所有零件信息,并将其以JSON格式返回。
6. 将返回的零件信息使用JavaScript动态生成一个表格,其中包括每个零件的名称和价格等信息。
7. 在表格的底部,添加一个“统计”按钮,点击后使用JavaScript遍历表格中所有的价格,并计算出总价格。
代码示例:
```
<?php
// 连接数据库
$servername = "localhost"
$username = "username"
$password = "password"
$dbname = "mydb"
$conn = new mysqli($servername, $username, $password, $dbname)
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error)
}
// 查询所有的分类信息
$sql = "SELECT * FROM category"
$result = $conn->query($sql)
$categories = array()
if ($result->num_rows >0) {
while($row = $result->fetch_assoc()) {
$categories[] = $row
}
}
// 关闭数据库连接
$conn->close()
?>基老
<!-- 在HTML页面中,创建一个下拉菜单,并填充所有的分类信息 -->
<select id="category">
<?php foreach($categories as $category): ?>
<option value="<?php echo $category['id'] ?>"><?php echo $category['name'] ?></option>
<?php endforeach?>
</select>
<!-- 在HTML页面中,创建一个运锋裂空的表格,用于显示零件信息 -->
<table id="parts">
<thead>
<tr>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!-- 在HTML页面中,添加一个“统计”按钮 -->
<button id="total">统计</button>
<script>
// 当下拉菜单的值发生改变时,使用Ajax获取该分类下的所有零件信息,并以JSON格式返回
document.getElementById('category').addEventListener('change', function() {
var categoryId = this.value
var xhr = new XMLHttpRequest()
xhr.open('GET', 'getParts.php?category=' + categoryId, true)
xhr.onload = function() {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText)
// 生成一个新的表格并填充零件信息
var tbody = document.createElement('tbody')
data.forEach(function(part) {
var tr = document.createElement('tr')
var name = document.createElement('td')
var price = document.createElement('td')
name.innerText = part.name
price.innerText = part.price
tr.appendChild(name)
tr.appendChild(price)
tbody.appendChild(tr)
})
document.getElementById('parts').replaceChild(tbody, document.getElementById('parts').getElementsByTagName('tbody')[0])
}
}
xhr.send()
})
// 当点击“统计”按钮时,遍历表格中的所有价格并计算总价格
document.getElementById('total').addEventListener('click', function() {
var total = 0
var prices = document.getElementById('parts').querySelectorAll('tbody td:nth-child(2)')
for (var i = 0i <prices.lengthi++) {
total += parseFloat(prices[i].innerText)
}
alert('总价格:' + total)
})
</script>
```
在上述示例代码中,`getParts.php`文件是用于获取某个分类下的所有零件信息的后台文件。你可以根据自己的需求编写该文件,实现从数据库中查询相关数据并以JSON格式返回的功能。
复制代码如下:不明白问我<?
session_start()
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<form id="form1" name="form1" method="post" action=""><p align="center">
请输入班级学生人数
<input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="提交" /></p>
</form>
<?
//设计思路一、是通过页面输入的学生个中扒数动态的生成有多少个要录入成绩的文本框(如下所以第一步),然后通过SESSION变量来存储表单作为下一步显示,二、通过生成表单后单击汇总成绩按钮计算学生分数,这里用到了一个隐藏控件把共多少个学生存到里面(1、可以直接用第一步里接受过来的学生个数。2、可以用for循环中的i变量)来获取学生大培侍个数,接下来如图第二部所示用到了一个字符串替换函数,是为了在同页面把文本框值保存所用
if(isset($_POST['button'])){//第一步
$_SESSION['fo']=""//利用session来保存学生表单
$_SESSION['fo'].="<form id='form2' name='form2' method='post' action=''><br>"
$_SESSION['fo'].="<p align='center'>"
for($i=1$i<=$_POST['textfield']$i++){//生成共多少个学生成绩
$_SESSION['fo'].="第{$i}学生的成绩:<input type='text' name='t{$i}' id='t{$i}' value=''><br>"
}
echo $_SESSION['fo'].="<input type='hidden' name='i' value='{$i}'><input type='submit' value='汇总成绩' name='heji'></p></form>"//打印学生录入表单
}
if(isset($_POST['heji'])){//判断是否点击了汇总成绩按钮第二部
for($i=1$i<$_POST['i']$i++){
$heji+=$_POST['t'.$i]//存储学生总成绩
$val=$_POST['t'.$i]//存储学生成绩
$_SESSION['fo']=str_replace("<input type='text' name='t{$i}' id='t{$i}' value=''>","<input type='text' name='t{$i}' id='t{$i}' value='{$val}'>",$_SESSION['fo'])//把填写过的学生成绩进行保留
}
echo $_SESSION['fo']//打印学生录入成表单
echo "<p align='center'滚吵>总成绩为:{$heji}</p>"//显示总成绩分数
}
?>
</body>
</html>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)