84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
我正在尝试使用 HTML 创建一个简单的维修表单,使用下拉列表我希望能够选择一个模型,然后在两个表中显示所有兼容零件,一个用于新零件,一个用于报废。目前,我在进行演示时正在将数据硬编码到 JavaScript 中。我遇到的问题是零件表除了标题之外没有显示任何内容。我错过了什么?
Repair Form Repair Form
最初,我尝试创建 CSV 文件来控制数据,但没有成功。我还需要它在本地工作,而不是在 Web 服务器上。
您将brand-1作为模型下拉列表中的值传递给item[0],将其更改为item[2]它代表模型。我建议您在顶部添加一个空白选项,例如“选择模型”,以便在页面加载时默认不选择任何选项。 不要在段落之外使用。请停止使用var,使用const或let。如果数据将被更改,则使用 let,对于固定数据,请使用 const。
brand-1
item[0]
item[2]
var
const
let
// SKU data let skuData = [ ["SKU1", "Description 1", "Value 1"], ["SKU2", "Description 2", "Value 2"], ["SKU3", "Description 3", "Value 3"] ]; // Model data let modelData = [ ["Brand 1", "Gen 1", "Model 1"], ["Brand 2", "Gen 2", "Model 2"], ["Brand 3", "Gen 3", "Model 3"] ]; // New parts data let newPartsData = [ ["Part 1", "10", "5", "Model 1,Model 2"], ["Part 2", "20", "3", "Model 1,Model 3"], ["Part 3", "30", "2", "Model 2,Model 3"] ]; // Salvaged parts data let salvagePartsData = [ ["Part 4", "15", "4", "Model 1,Model 3"], ["Part 5", "25", "6", "Model 2,Model 3"], ["Part 6", "35", "2", "Model 1,Model 2"] ]; function populateDropdowns() { var skuDropdown = document.getElementById('sku'); var modelDropdown = document.getElementById('model'); // Populate SKU dropdown skuData.forEach(function(item) { var option = document.createElement('option'); option.value = item[0]; option.text = item[1] + " - " + item[2]; skuDropdown.appendChild(option); }); // Populate Model dropdown modelData.forEach(function(item) { var option = document.createElement('option'); option.value = item[2]; option.text = item[0] + " - " + item[1] + " - " + item[2]; modelDropdown.appendChild(option); }); // Initial population of tables populateTables(); } function populateTables() { var modelSelection = document.getElementById('model').value; // Populate New Parts table var newPartsTable = document.getElementById('new-parts-table'); newPartsTable.innerHTML = "PartQuantitySelect"; newPartsData.forEach(function(item) { if (item[3].includes(modelSelection)) { var row = document.createElement('tr'); var partCell = document.createElement('td'); partCell.textContent = item[0]; row.appendChild(partCell); var quantityCell = document.createElement('td'); quantityCell.textContent = item[2]; row.appendChild(quantityCell); var selectCell = document.createElement('td'); var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.name = 'new_parts[]'; checkbox.value = item[0]; selectCell.appendChild(checkbox); row.appendChild(selectCell); newPartsTable.appendChild(row); } }); // Populate Salvaged Parts table var salvagePartsTable = document.getElementById('salvaged-parts-table'); salvagePartsTable.innerHTML = "PartQuantitySelect"; salvagePartsData.forEach(function(item) { if (item[3].includes(modelSelection)) { var row = document.createElement('tr'); var partCell = document.createElement('td'); partCell.textContent = item[0]; row.appendChild(partCell); var quantityCell = document.createElement('td'); quantityCell.textContent = item[2]; row.appendChild(quantityCell); var selectCell = document.createElement('td'); var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.name = 'salvaged_parts[]'; checkbox.value = item[0]; selectCell.appendChild(checkbox); row.appendChild(selectCell); salvagePartsTable.appendChild(row); } }); } function checkValue() { var skuValue = parseInt(document.getElementById('sku').value); var newParts = document.getElementsByName('new_parts[]'); var salvagedParts = document.getElementsByName('salvaged_parts[]'); var totalValue = 0; for (var i = 0; i < newParts.length; i++) { if (newParts[i].checked) { var partName = newParts[i].value; var partIndex = newPartsData.findIndex(function(item) { return item[0] === partName; }); totalValue += parseInt(newPartsData[partIndex][1]); } } for (var i = 0; i < salvagedParts.length; i++) { if (salvagedParts[i].checked) { var partName = salvagedParts[i].value; var partIndex = salvagePartsData.findIndex(function(item) { return item[0] === partName; }); totalValue += parseInt(salvagePartsData[partIndex][1]); } } var submitButton = document.getElementById('submit-button'); if (totalValue < skuValue) { submitButton.classList.remove('red-button'); submitButton.classList.add('green-button'); submitButton.textContent = 'Pass'; } else { submitButton.classList.remove('green-button'); submitButton.classList.add('red-button'); submitButton.textContent = 'Nix'; } } form { display: flex; flex-direction: column; gap: 10px; width: 250px; } .table { border-collapse: collapse; } .table th, .table td { border: 1px solid black; padding: 5px; } .green-button { background-color: green; color: white; padding: 10px 20px; font-size: 16px; border: none; cursor: pointer; } .red-button { background-color: red; color: white; padding: 10px 20px; font-size: 16px; border: none; cursor: pointer; } Repair Form Technician: SKU: Serial: Model: Select Model New Parts Salvaged Parts 点赞+0 添加回复 关闭回复 P粉252423906 回复 热门专题 更多> a5纸多大尺寸 注册域名查询工具 nohup和&的区别 c语言中+=的意思介绍 热门文章 Binance交易所是正规交易所吗 Binance网交易所排名多少 Bitstamp交易所安卓版下载安装教程 在 Laravel 中制作可重用的模型搜索:高效设置和最佳实践 随着 Rivian 将 R2 连接器移至特斯拉一侧,Lucid Gravity 提供 NACS 和 CCS 充电端口 电脑安全卫士哪个好用window 热门教程 更多> 相关教程 热门推荐 最新课程 最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课) 1395094 php入门教程之一周学会PHP 4207033 JAVA 初级入门视频教程 2353163 最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课) 1395094 JAVA 初级入门视频教程 2353163 小甲鱼零基础入门学习Python视频教程 493455 Web前端开发极速入门 213435 零基础精通 PS 视频教程 843679 【web前端】Node.js快速入门 3193 国外Web开发全栈课程全集 2569 Go语言实战之 GraphQL 2016 550W粉丝大佬手把手从零学JavaScript 467 python大神Mosh,零基础小白6小时完全入门 11046 最新下载 更多> 网站特效 网站源码 网站素材 前端模板 [表单按钮] jQuery企业留言表单联系代码 [播放器特效] HTML5 MP3音乐盒播放特效 [菜单导航] HTML5炫酷粒子动画导航菜单特效 [表单按钮] jQuery可视化表单拖拽编辑代码 [播放器特效] VUE.JS仿酷狗音乐播放器代码 [html5特效] 经典html5推箱子小游戏 [图片特效] jQuery滚动添加或减少图片特效 [相册特效] CSS3个人相册封面悬停放大特效 [Bootstrap模板] 有机果蔬供应商网页模板 Bootstrap5 [后端模板] Bootstrap3多功能数据信息后台管理响应式网页模板-Novus [Bootstrap模板] 房产资源服务平台网页模板 Bootstrap5 [Bootstrap模板] 简约简历资料网页模板 Bootstrap4 [Bootstrap模板] bootstrap响应式宽屏图书教育网站模板-DREAMLIFE [后端模板] MAC风格响应式蓝色企业CMS后台管理系统模版 [后端模板] 响应式渐变大气后台管理系统网站模板-usinessbox [Bootstrap模板] 响应式蔬菜水果商店网站模板-Organio [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG) [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG) [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS) [PNG素材] 金色的毕业帽矢量素材(EPS+PNG) [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG) [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG) [banner图] 扁平风格的植树节banner矢量素材(AI+EPS) [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG) [前端模板] 家居装潢清洁维修服务公司网站模板 [前端模板] 清新配色个人求职简历引导页模板 [前端模板] 设计师创意求职简历网页模板 [前端模板] 现代工程建筑公司网站模板 [前端模板] 教育服务机构响应式HTML5模板 [前端模板] 网上电子书店商城网站模板 [前端模板] IT技术解决互联网公司网站模板 [前端模板] 紫色风格外汇交易服务网站模板 关于我们 免责声明 Sitemap PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!
form { display: flex; flex-direction: column; gap: 10px; width: 250px; } .table { border-collapse: collapse; } .table th, .table td { border: 1px solid black; padding: 5px; } .green-button { background-color: green; color: white; padding: 10px 20px; font-size: 16px; border: none; cursor: pointer; } .red-button { background-color: red; color: white; padding: 10px 20px; font-size: 16px; border: none; cursor: pointer; }
Repair Form
您将
brand-1
作为模型下拉列表中的值传递给item[0]
,将其更改为item[2]
它代表模型。我建议您在顶部添加一个空白选项,例如“选择模型”,以便在页面加载时默认不选择任何选项。 不要在段落之外使用
。请停止使用var
,使用const
或let
。如果数据将被更改,则使用 let,对于固定数据,请使用 const。