DOCTYPE引起的一系列问题-->Select样式，文本框样式width100%超过父容器

最新推荐文章于 2023-08-10 09:51:53 发布
转载 最新推荐文章于 2023-08-10 09:51:53 发布 · 834 阅读 · 0

本文探讨了在IE8浏览器中，不同DOCTYPE声明对HTML元素样式的影响，特别是select和input元素，并提供了解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

HTML <!DOCTYPE> 标签
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
DOCTYPE的详细说明见W3Schcool：http://www.w3school.com.cn/tags/tag_doctype.asp


笔者的问题：
当不写DOCTYPE或者DOCTYPE为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">之类的时。代码如下：
[html]  view plain copy
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.     <head>  
  4.     </head>  
  5.     <body>  
  6.         <select>  
  7.             <option>选项...</option>  
  8.         </select>  
  9.         <br><br>  
  10.         <div style="width:200px;background-color: green;">  
  11.                
  12.         </div>  
  13.         <div style="width:200px;background-color: red;">  
  14.             <input type='text' style='width:100%;'>  
  15.         </div>  
  16.     </body>  
  17. </html>  

IE8显示效果：

可以看到这个时候文本框的样式设置width=100% 没有问题的，但是select的样式却奇丑无比。。。

当把DOCTYPE 写成HTML5的<!DOCTYPE html>或者 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">时，代码如下：
[html]  view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.     </head>  
  5.     <body>  
  6.         <select>  
  7.             <option>选项...</option>  
  8.         </select>  
  9.         <br><br>  
  10.         <div style="width:200px;background-color: green;">  
  11.                
  12.         </div>  
  13.         <div style="width:200px;background-color: red;">  
  14.             <input type='text' style='width:100%;'>  
  15.         </div>  
  16.     </body>  
  17. </html>  

IE8显示效果：

这个时候下拉框变美了...文本框则超出....

这个问题找了一个上午，就在即将要放弃的时候。。终于在stackoverflow看到一哥们给出如下的解决方案： 
<code style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif;"><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">input</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">[</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">type</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">=</span><span class="str" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent; color: rgb(128, 0, 0);">"text"</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">]</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;"> </span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">{</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">
     width</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">:</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;"> </span><span class="lit" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent; color: rgb(128, 0, 0);">100</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">%;</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;"> 
     box</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">sizing</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">:</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;"> border</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">box</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">;</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">
     </span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">webkit</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">box</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">sizing</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">:</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">border</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">box</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">;</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">
     </span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">moz</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">box</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">sizing</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">:</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;"> border</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">-</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">box</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">;</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">
</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background-color: transparent;">}</span></code>
代码：
[html]  view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.     </head>  
  5.     <body>  
  6.         <select>  
  7.             <option>选项...</option>  
  8.         </select>  
  9.         <br><br>  
  10.         <div style="width:200px;background-color: green;">  
  11.                
  12.         </div>  
  13.         <div style="width:200px;background-color: red;"  >  
  14.             <!-- 刚开始没有加margin:0px; 后来把文本框放在td中显示有一点点瑕疵,所以加上了 -->  
  15.             <input type='text' style="margin: 0px;width: 100%;padding: 0px; box-sizing: border-box;-webkit-box-sizing:border-box;-moz-box-sizing: border-box;">  
  16.         </div>  
  17.     </div>  
  18.     </body>  
  19. </html>  

IE8显示效果：
HadesCool
关注
下拉菜单选择输入框样式
yedaiyang的博客
12-20 2184
.ip {     border: 1px solid red;    }              只有输入框样式变化    显示详细信息    点击时显示效果    输入密码    重复密码      提交       {{li}}          var mo = angular.module("MyApp", []);    mo.controlle
select下拉框宽度设置问题（自适应宽度，水平滚动条）
热门推荐
chao1513392的专栏
12-13 8万+
概述： 在实际应用中，很多时候都会用到select，但是由于下拉框的内容宽度不可控，就导致select宽度往往不是我们想要的。 需求：              1、给select设置最小值，在内容小于最小值时，要控制select的宽度是最小值，而不能让它太短，影响美观程度。              2、对应的也需要设置最大值。              3、当内容过长时，给出提示。
<!DOCTYPE html>的重要性！
weixin_30808575的博客
12-29 140
噩梦开始的源头：之前写html或者jsp页面，从来不注意doctype的声明，也不太明白doctype的作用。 直到最近碰到了一个非常奇葩的bug：某一个页面在IE7和8，Chrome，ff等下正常，但是在IE9下显示有问题 我就开始找啊找，各种调试，各种log 终于在httpWatch里边找到了答案：DOCTYPE未声明。于是我给页面添加了<!DOCTYPE html>,果然奏...
java.lang.IllegalArgumentExcep：DOCTYPE clause cannot have a non-null PUBLIC ID and a null SYSTEM ID
y50458的博客
08-10 329
改成下面即可。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>收费项目明细添加</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css"> <style> body { background-color: #f2f3f5; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .x-body { padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); margin: 20px auto; max-width: 800px; } .form-header { font-size: 18px; font-weight: bold; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid #eee; color: #333; } .x-red { color: #ff5722; } .layui-form-label { width: 120px; font-weight: 500; } .layui-input-block { margin-left: 150px; } .submit-btn { margin-top: 30px; text-align: center; } .error-tip { color: #ff5722; font-size: 12px; margin-top: 5px; display: none; } .has-error .error-tip { display: block; } .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); z-index: 9999; display: flex; align-items: center; justify-content: center; } </style> </head> <body> <div id="app"> <div class="x-body"> <div class="form-header">收费项目明细添加</div> <form class="layui-form layui-form-pane"> <input type="hidden" name="id" v-model="formData.id"> <!-- 所属小区（改为文本框） --> <div class="layui-form-item" :class="{'has-error': errors.community_name}"> <label class="layui-form-label"> <span class='x-red'>*</span>所属小区 </label> <div class="layui-input-block"> <!-- 关键修改1：select改为input --> <input type="text" v-model="formData.community_name" class="layui-input" placeholder="请输入所属小区名称" lay-verify="required"> <div class="error-tip" v-if="errors.community_name">{{ errors.community_name }}</div> </div> </div> <!-- 收费项目（改为文本框） --> <div class="layui-form-item" :class="{'has-error': errors.project_name}"> <label class="layui-form-label"> <span class='x-red'>*</span>收费项目 </label> <div class="layui-input-block"> <!-- 关键修改2：select改为input --> <input type="text" v-model="formData.project_name" class="layui-input" placeholder="请输入收费项目名称" lay-verify="required"> <div class="error-tip" v-if="errors.project_name">{{ errors.project_name }}</div> </div> </div> <!-- 业主（改为文本框） --> <div class="layui-form-item" :class="{'has-error': errors.owner_name}"> <label class="layui-form-label"> <span class='x-red'>*</span>业主 </label> <div class="layui-input-block"> <!-- 关键修改3：select改为input --> <input type="text" v-model="formData.owner_name" class="layui-input" placeholder="请输入业主姓名" lay-verify="required"> <div class="error-tip" v-if="errors.owner_name">{{ errors.owner_name }}</div> </div> </div> <!-- 应收金额 --> <div class="layui-form-item" :class="{'has-error': errors.yf_money}"> <label class="layui-form-label"> <span class='x-red'>*</span>应收金额(￥) </label> <div class="layui-input-block"> <input type="number" v-model="formData.yf_money" autocomplete="off" placeholder="请输入应收金额" class="layui-input" @input="validateMoney('yf_money')"> <div class="error-tip" v-if="errors.yf_money">{{ errors.yf_money }}</div> </div> </div> <!-- 实收金额 --> <div class="layui-form-item" :class="{'has-error': errors.ss_money}"> <label class="layui-form-label"> <span class='x-red'>*</span>实收金额(￥) </label> <div class="layui-input-block"> <input type="number" v-model="formData.ss_money" autocomplete="off" placeholder="请输入实收金额" class="layui-input" @input="validateMoney('ss_money')"> <div class="error-tip" v-if="errors.ss_money">{{ errors.ss_money }}</div> </div> </div> <!-- 缴费日期 --> <div class="layui-form-item" :class="{'has-error': errors.jf_time}"> <label class="layui-form-label"> <span class='x-red'>*</span>缴费日期 </label> <div class="layui-input-inline"> <input class="layui-input" v-model="formData.jf_time" placeholder="点击选择日期" id="paymentDate" readonly> </div> <div class="error-tip" v-if="errors.jf_time">{{ errors.jf_time }}</div> </div> <!-- 备注 --> <div class="layui-form-item"> <label class="layui-form-label"> <span class='x-red'>*</span>备注 </label> <div class="layui-input-block"> <textarea placeholder="请输入备注内容" v-model="formData.desc" class="layui-textarea"></textarea> </div> </div> <!-- 提交按钮 --> <div class="layui-form-item submit-btn"> <button class="layui-btn layui-btn-normal" type="button" @click="submitForm"> 保存 </button> <button class="layui-btn layui-btn-primary" type="button" @click="resetForm"> 重置 </button> </div> </form> </div> <!-- 加载中提示 --> <div class="loading-overlay" v-if="loading"> <div class="layui-anim layui-anim-rotate layui-anim-loop"> <i class="layui-icon layui-icon-loading" style="font-size: 40px; color: #1E9FFF;"></i> </div> <div style="margin-top: 10px; color: #666;">提交中，请稍候...</div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script> <script> new Vue({ el: '#app', data: { formData: { id: '', community_name: '', // 关键修改4：字段名从community_id改为community_name project_name: '', // 关键修改5：字段名从project_id改为project_name owner_name: '', // 关键修改6：字段名从personnel_id改为owner_name yf_money: '', ss_money: '', jf_time: '', desc: '' }, errors: { community_name: '', // 关键修改7：错误字段名同步调整 project_name: '', owner_name: '', yf_money: '', ss_money: '', jf_time: '' }, loading: false, laydate: null }, mounted() { layui.use(['laydate', 'form'], () => { this.laydate = layui.laydate; layui.form.render(); this.initDatePicker(); }); }, methods: { initDatePicker() { this.laydate.render({ elem: '#paymentDate', type: 'date', value: this.formData.jf_time || new Date(), min: '2010-01-01', max: '2099-12-31', done: (value) => { this.formData.jf_time = value; this.validateField('jf_time'); } }); }, validateMoney(field) { const value = this.formData[field]; if (!value) { this.errors[field] = '金额不能为空'; } else if (isNaN(value) || parseFloat(value) <= 0) { this.errors[field] = '请输入有效的金额'; } else { this.errors[field] = ''; } }, validateField(field) { switch(field) { // 关键修改8：验证字段名同步调整 case 'community_name': this.errors.community_name = this.formData.community_name ? '' : '请输入所属小区'; break; case 'project_name': this.errors.project_name = this.formData.project_name ? '' : '请输入收费项目'; break; case 'owner_name': this.errors.owner_name = this.formData.owner_name ? '' : '请输入业主'; break; case 'yf_money': this.validateMoney('yf_money'); break; case 'ss_money': this.validateMoney('ss_money'); break; case 'jf_time': this.errors.jf_time = this.formData.jf_time ? '' : '请选择缴费日期'; break; } }, validateForm() { // 关键修改9：验证字段名同步调整 this.validateField('community_name'); this.validateField('project_name'); this.validateField('owner_name'); this.validateField('yf_money'); this.validateField('ss_money'); this.validateField('jf_time'); // 检查是否有错误 for (let key in this.errors) { if (this.errors[key]) return false; } // 验证实收金额不小于应收金额 if (parseFloat(this.formData.ss_money) < parseFloat(this.formData.yf_money)) { this.errors.ss_money = '实收金额不能小于应收金额'; return false; } return true; }, submitForm() { if (!this.validateForm()) { layui.layer.msg('请正确填写表单', {icon: 5}); return; } this.loading = true; // 模拟AJAX提交 setTimeout(() => { this.loading = false; // 模拟成功响应（这里保存的是文本输入值） layui.layer.msg('添加成功', {icon: 1, time: 1500}, () => { if (window.parent && window.parent.layer) { const index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); parent.location.reload(); } this.resetForm(); }); }, 1500); }, resetForm() { this.formData = { id: '', community_name: '', project_name: '', owner_name: '', yf_money: '', ss_money: '', jf_time: '', desc: '' }; for (let key in this.errors) { this.errors[key] = ''; } this.initDatePicker(); } } }); </script> </body> </html> 删除备注
07-04
--备注--><divclass="layui-form-item"><labelclass="layui-form-label"><spanclass='x-red'>*</span>备注</label><divclass="layui-input-block">请输入备注内容"v-model="formData.desc"class="layui-textarea">...
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>入库模块</title> <link rel="stylesheet" href="../static/bootstrap-4.6.0-dist/css/bootstrap.min.css"> <style> body { background-color: #f8f9fa; font-family: Arial, sans-serif; } .container { max-width: 1000px; min-height: 600px; /* 可根据需求调整这个值来改变整体框的最小高度 */ } .header { margin: 20px 0; color: #343a40; font-weight: bold; } .form-group { margin-bottom: 1.5rem; /* 增加表单组之间的间距 */ } .list-group-item { display: grid; grid-template-columns: repeat(3, 1fr); justify-content: space-between; align-items: center; width: 100%; padding: 5px 10px; border: 1px solid #dee2e6; border-radius: 5px; box-sizing: border-box; } .list-group-item span { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card { border: none; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); padding: 20px; background-color: #ffffff; } .btn-primary { background-color: #007bff; border: none; width: 200px; /* 设置按钮宽度为 50 像素 */ } .btn-primary:hover { background-color: #0056b3; } footer { margin-top: 20px; padding: 10px 0; background-color: #343a40; color: white; border-radius: 0 0 15px 15px; } /* 为查询按钮添加左外边距 */ .btn-query { margin-left: 100px; } /* 新增的按钮容器样式 */ .button-container { text-align: center; } /* 新增的样式，设置入库编号文本框的尺寸 */ .small-input { width: 150px; /* 你可以根据需要调整宽度 */ } /* 新增样式，使入库编号输入框在同一行显示 */ .id-inputs { display: flex; flex-wrap: wrap; align-items: center; } .id-inputs label { margin-right: 5px; } .id-row { display: flex; flex-wrap: wrap; align-items: center; width: 100%; } </style> </head> <body> <div class="container"> <h1 class="text-center header">金铜线入库模块</h1> <div class="card mb-4"> <form method="POST"> <div class="form-group"> <label for="item">整半卷类型</label> <select class="form-control" id="category" name="category" required> <option value="" disabled selected>请选择入库类型</option> <option value="整卷">整卷</option> <option value="半卷">半卷</option> {% if category %} <option value="{{ category }}" selected>{{ category }}</option> {% endif %} </select> </div> <div class="form-group"> <label for="item">入库型号</label> <select class="form-control" id="type" name="item" required> <option value="" disabled selected>请选择物品编号</option> <option value="70694">70694 - AU</option> <option value="70704">70704 - AU</option> <option value="70774">70774 - AU</option> <option value="70794">70794 - CU</option> <option value="70804">70708 - CU</option> <option value="70784">7058779 - CU</option> </select> </div> <div class="form-group"> <label for="batchNumber">入库批号</label> <input type="text" class="form-control" id="batchNumber" name="batchNumber" required> </div> <div class="form-group id-inputs"> <div class="id-row"> <div class="form-group"> <label for="ID1">编号#1</label> <input type="text" class="form-control small-input" id="ID1" name="ID1"> </div> <div class="form-group"> <label for="ID2">编号#2</label> <input type="text" class="form-control small-input" id="ID2" name="ID2"> </div> <div class="form-group"> <label for="ID3">编号#3</label> <input type="text" class="form-control small-input" id="ID3" name="ID3"> </div> <div class="form-group"> <label for="ID4">编号#4</label> <input type="text" class="form-control small-input" id="ID4" name="ID4"> </div> <div class="form-group"> <label for="ID5">编号#5</label> <input type="text" class="form-control small-input" id="ID5" name="ID5"> </div> <div class="form-group"> <label for="ID6">编号#6</label> <input type="text" class="form-control small-input" id="ID6" name="ID6"> </div> </div> <div class="id-row"> <div class="form-group"> <label for="ID7">编号#7</label> <input type="text" class="form-control small-input" id="ID7" name="ID7"> </div> <div class="form-group"> <label for="ID8">编号#8</label> <input type="text" class="form-control small-input" id="ID8" name="ID8"> </div> <div class="form-group"> <label for="ID9">编号#9</label> <input type="text" class="form-control small-input" id="ID9" name="ID9"> </div> <div class="form-group"> <label for="ID10">编号#10</label> <input type="text" class="form-control small-input" id="ID10" name="ID10"> </div> <div class="form-group"> <label for="ID11">编号#11</label> <input type="text" class="form-control small-input" id="ID11" name="ID11"> </div> <div class="form-group"> <label for="ID12">编号#12</label> <input type="text" class="form-control small-input" id="ID12" name="ID12"> </div> </div> </div> <div class="form-group"> <label for="quantity">入库数量</label> <input type="number" class="form-control" id="quantity" name="quantity" value="1" required> </div> <div class="form-group"> <label for="date">入库日期</label> <input type="datetime-local" class="form-control" id="date" name="date" required value="{{ date }}"> </div> <div class="form-group"> <label for="shift">入库班次</label> <select class="form-control" id="shift" name="shift" required> <option value="" disabled selected>请选择班次</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> {% if shift %} <option value="{{ shift }}" selected>{{ shift }}</option> {% endif %} </select> </div> <div class="form-group"> <label for="barge">员工工号</label> <input type="text" class="form-control small-input" id="barge" name="barge" required value="{{ username }}"> </div> <!-- 使用新增的容器包裹按钮 --> <div class="button-container"> <button type="submit" class="btn btn-primary">入库</button> <div></div> <button type="button" class="btn btn-primary btn-query" id="queryButton">查询</button> </div> </form> </div> <h2 class="mt-4" align="center">当前库存</h2> <ul class="list-group" id="inventoryList"> <li class="list-group-item"> <span style="font-weight: bold;">入库类型</span> <span style="font-weight: bold;">在库型号</span> <span style="font-weight: bold;">在库数量</span> </li> {% for data in inventory_data %} <li class="list-group-item"> <span>{{ data.category }}</span> <span>{{ data.item }}</span> <span>{{ data.quantity }}</span> </li> {% endfor %} </ul> <a href="/" class="btn btn-link">返回首页</a> </div> <footer> <div class="text-center"> <p>本系统用于管理金铜线的入库、出库和库存报告</p> <p>任何问题,请联系YanNiZong(cell:13910052243)</p> </div> </footer> <script> function submitForm(event) { event.preventDefault(); // 阻止表单默认提交行为 // 获取表单数据 const data = { category: document.getElementById('category').value, type: document.getElementById('type').value, batchNumber: document.getElementById('batchNumber').value, ID1: document.getElementById('ID1').value, ID2: document.getElementById('ID2').value, ID3: document.getElementById('ID3').value, ID4: document.getElementById('ID4').value, ID5: document.getElementById('ID5').value, ID6: document.getElementById('ID6').value, ID7: document.getElementById('ID7').value, ID8: document.getElementById('ID8').value, ID9: document.getElementById('ID9').value, ID10: document.getElementById('ID10').value, ID11: document.getElementById('ID11').value, ID12: document.getElementById('ID12').value, quantity: document.getElementById('quantity').value, date: document.getElementById('date').value, shift: document.getElementById('shift').value, barge: document.getElementById('barge').value }; console.log(data) fetch('/into_storage', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) .then(response => response.json()) .then(result => { alert(result.message); // 简单提示结果 if (result.status === 'success') { // 重置表单（可选） document.getElementById('batchNumber').value = ''; for(let i=1; i<=12; i++) { document.getElementById(`ID${i}`).value = ''; } } }) .catch(error => alert('网络错误: ' + error)); } // 绑定表单提交事件 document.querySelector('form').addEventListener('submit', submitForm); </script> </body> </html> 这里的javascript有什么问题吗，可以通过id绑定按钮事件吗，或者哪一种交互、方式会更好
06-19
代码修改如下：</think>我分析了提供的JavaScript代码，发现存在几个关键问题需要改进： ### 主要问题分析： 1. **表单提交方式冲突**： - 同时使用了传统的form submit和fetch API，会导致重复提交 - 当点击...
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>入库模块</title> <link rel="stylesheet" href="../static/bootstrap-4.6.0-dist/css/bootstrap.min.css"> <style> body { background-color: #f8f9fa; font-family: Arial, sans-serif; } .container { max-width: 1000px; min-height: 600px; /* 可根据需求调整这个值来改变整体框的最小高度 */ } .header { margin: 20px 0; color: #343a40; font-weight: bold; } .form-group { margin-bottom: 1.5rem; /* 增加表单组之间的间距 */ } .list-group-item { display: grid; grid-template-columns: repeat(3, 1fr); justify-content: space-between; align-items: center; width: 100%; padding: 5px 10px; border: 1px solid #dee2e6; border-radius: 5px; box-sizing: border-box; } .list-group-item span { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card { border: none; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); padding: 20px; background-color: #ffffff; } .btn-primary { background-color: #007bff; border: none; width: 200px; /* 设置按钮宽度为 50 像素 */ } .btn-primary:hover { background-color: #0056b3; } footer { margin-top: 20px; padding: 10px 0; background-color: #343a40; color: white; border-radius: 0 0 15px 15px; } /* 为查询按钮添加左外边距 */ .btn-query { margin-left: 100px; } /* 新增的按钮容器样式 */ .button-container { text-align: center; } /* 新增的样式，设置入库编号文本框的尺寸 */ .small-input { width: 150px; /* 你可以根据需要调整宽度 */ } /* 新增样式，使入库编号输入框在同一行显示 */ .id-inputs { display: flex; flex-wrap: wrap; align-items: center; } .id-inputs label { margin-right: 5px; } .id-row { display: flex; flex-wrap: wrap; align-items: center; width: 100%; } </style> </head> <body> <div class="container"> <h1 class="text-center header">金铜线入库模块</h1> <div class="card mb-4"> <form method="POST"> <div class="form-group"> <label for="item">整半卷类型</label> <select class="form-control" id="category" name="category" required> <option value="" disabled selected>请选择入库类型</option> <option value="整卷">整卷</option> <option value="半卷">半卷</option> {% if category %} <option value="{{ category }}" selected>{{ category }}</option> {% endif %} </select> </div> <div class="form-group"> <label for="item">入库型号</label> <select class="form-control" id="type" name="item" required> <option value="" disabled selected>请选择物品编号</option> <option value="70694">70694 - AU</option> <option value="70704">70704 - AU</option> <option value="70774">70774 - AU</option> <option value="70794">70794 - CU</option> <option value="70804">70708 - CU</option> <option value="70784">7058779 - CU</option> </select> </div> <div class="form-group"> <label for="batchNumber">入库批号</label> <input type="text" class="form-control" id="batchNumber" name="batchNumber" required> </div> <div class="form-group id-inputs"> <div class="id-row"> <div class="form-group"> <label for="ID1">编号#1</label> <input type="text" class="form-control small-input" id="ID1" name="ID1"> </div> <div class="form-group"> <label for="ID2">编号#2</label> <input type="text" class="form-control small-input" id="ID2" name="ID2"> </div> <div class="form-group"> <label for="ID3">编号#3</label> <input type="text" class="form-control small-input" id="ID3" name="ID3"> </div> <div class="form-group"> <label for="ID4">编号#4</label> <input type="text" class="form-control small-input" id="ID4" name="ID4"> </div> <div class="form-group"> <label for="ID5">编号#5</label> <input type="text" class="form-control small-input" id="ID5" name="ID5"> </div> <div class="form-group"> <label for="ID6">编号#6</label> <input type="text" class="form-control small-input" id="ID6" name="ID6"> </div> </div> <div class="id-row"> <div class="form-group"> <label for="ID7">编号#7</label> <input type="text" class="form-control small-input" id="ID7" name="ID7"> </div> <div class="form-group"> <label for="ID8">编号#8</label> <input type="text" class="form-control small-input" id="ID8" name="ID8"> </div> <div class="form-group"> <label for="ID9">编号#9</label> <input type="text" class="form-control small-input" id="ID9" name="ID9"> </div> <div class="form-group"> <label for="ID10">编号#10</label> <input type="text" class="form-control small-input" id="ID10" name="ID10"> </div> <div class="form-group"> <label for="ID11">编号#11</label> <input type="text" class="form-control small-input" id="ID11" name="ID11"> </div> <div class="form-group"> <label for="ID12">编号#12</label> <input type="text" class="form-control small-input" id="ID12" name="ID12"> </div> </div> </div> <div class="form-group"> <label for="quantity">入库数量</label> <input type="number" class="form-control" id="quantity" name="quantity" value="1" required> </div> <div class="form-group"> <label for="date">入库日期</label> <input type="datetime-local" class="form-control" id="date" name="date" required value="{{ date }}"> </div> <div class="form-group"> <label for="shift">入库班次</label> <select class="form-control" id="shift" name="shift" required> <option value="" disabled selected>请选择班次</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> {% if shift %} <option value="{{ shift }}" selected>{{ shift }}</option> {% endif %} </select> </div> <div class="form-group"> <label for="barge">员工工号</label> <input type="text" class="form-control small-input" id="barge" name="barge" required value="{{ username }}"> </div> <!-- 使用新增的容器包裹按钮 --> <div class="button-container"> <button type="submit" class="btn btn-primary">入库</button> <div></div> <button type="button" class="btn btn-primary btn-query" id="queryButton">查询</button> </div> </form> </div> <h2 class="mt-4" align="center">当前库存</h2> <ul class="list-group" id="inventoryList"> <li class="list-group-item"> <span style="font-weight: bold;">入库类型</span> <span style="font-weight: bold;">在库型号</span> <span style="font-weight: bold;">在库数量</span> </li> {% for data in inventory_data %} <li class="list-group-item"> <span>{{ data.category }}</span> <span>{{ data.item }}</span> <span>{{ data.quantity }}</span> </li> {% endfor %} </ul> <a href="/" class="btn btn-link">返回首页</a> </div> <footer> <div class="text-center"> <p>本系统用于管理金铜线的入库、出库和库存报告</p> <p>任何问题,请联系YanNiZong(cell:13910052243)</p> </div> </footer> <script> function submitForm(event) { event.preventDefault(); // 阻止表单默认提交行为 // 获取表单数据 const data = { category: document.getElementById('category').value, type: document.getElementById('type').value, batchNumber: document.getElementById('batchNumber').value, ID1: document.getElementById('ID1').value, ID2: document.getElementById('ID2').value, ID3: document.getElementById('ID3').value, ID4: document.getElementById('ID4').value, ID5: document.getElementById('ID5').value, ID6: document.getElementById('ID6').value, ID7: document.getElementById('ID7').value, ID8: document.getElementById('ID8').value, ID9: document.getElementById('ID9').value, ID10: document.getElementById('ID10').value, ID11: document.getElementById('ID11').value, ID12: document.getElementById('ID12').value, quantity: document.getElementById('quantity').value, date: document.getElementById('date').value, shift: document.getElementById('shift').value, barge: document.getElementById('barge').value }; console.log(data) fetch('/into_storage', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) .then(response => response.json()) .then(result => { alert(result.message); // 简单提示结果 if (result.status === 'success') { // 重置表单（可选） document.getElementById('batchNumber').value = ''; for(let i=1; i<=12; i++) { document.getElementById(`ID${i}`).value = ''; } } }) .catch(error => alert('网络错误: ' + error)); } // 绑定表单提交事件 document.querySelector('form').addEventListener('submit', submitForm); </script> </body> </html> 帮忙优化一下修改，要求绑定入库按钮id来触发传输数据到后端flask框架，使用fetch交互，其它按钮先不用管
06-19
<think>我们有一个表单，其中包含多个输入字段和一个提交按钮（类型为submit）。当前，我们通过监听整个表单的submit事件来发送数据。但是，根据要求，我们需要改为通过绑定入库按钮（即提交按钮）的id来触发传输...
<!-- 前端页面完整代码 --> @{ Layout = null; } <!DOCTYPE html> <html> <head> <link href="~/Scripts/layui/css/layui.css" rel="stylesheet" /> <script src="~/Scripts/layui/layui.js"></script> <script src="~/Scripts/jquery-3.4.1.js"></script> <style> body { padding: 10px 20px 20px 20px; width: 90% } .but { margin-top: -5px } </style> </head> <body> <fieldset class="layui-elem-field"> <legend> <span class="layui-breadcrumb"> <a href="">首页</a> <a href="">职位管理</a> </span> </legend> <div class="layui-field-box"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">职位名称</label> <div class="layui-input-block"> <input type="text" name="name" id="name" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">职位代码</label> <div class="layui-input-inline"> <input type="text" name="code" id="code" autocomplete="off" class="layui-input"> </div> </div> <button type="button" class="layui-btn layui-btn-radius but" id="searchButton" onclick="Search()"><i class="layui-icon layui-icon-search"></i>查询</button> <button type="button" class="layui-btn layui-bg-blue but" onclick="AddJob()"><i class="layui-icon layui-icon-addition"></i>添加</button> </div> </div> </fieldset> <fieldset class="layui-elem-field"> <table class="layui-hide" id="test" lay-filter="test"></table> <script type="text/html" id="toolDemo"> <div class="layui-clear-space"> <a class="layui-btn layui-btn-xs" lay-event="edit" id="Edit"><i class="layui-icon layui-icon-edit"></i>编辑</a> <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="del" id="del"><i class="layui-icon layui-icon-clear"></i>删除</a> </div> </script> </fieldset> <script> var tableIns; layui.use(['table', 'layer', 'form'], function () { var table = layui.table; var layer = layui.layer; // 创建渲染实例 tableIns = table.render({ elem: '#test', url: '/JobManagem/GetList', page: true, cols: [[ { type: 'numbers', width: '15%', title: '序列号' }, { field: 'JobName', width: '20%', title: '职位名称' }, { field: 'JobCode', width: '20%', title: '职位代码' }, { field: 'ModifyDate', width: '20%', title: '修改时间', templet: function (d) { return formatDate(d.ModifyDate); } }, { title: '操作', width: '25%', templet: '#toolDemo' } ]], }); // 编辑删除事件 table.on('tool(test)', function (obj) { var data = obj.data; if (obj.event === 'edit') { EditJob(data); } else if (obj.event === 'del') { DeleteJob(data, obj); } }); }); function formatDate(dateStr) { if (!dateStr) return ''; // 提取时间戳（兼容 "/Date(123456789)/" 格式） var timestamp = parseInt(dateStr.replace(/\/Date$(\d+)$\//, '$ 1')); var date = new Date(timestamp); return date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + // 月份从0开始，需+1 ('0' + date.getDate()).slice(-2); } // 添加职位弹窗 function AddJob() { layer.open({ type: 1, title: '添加职位', content: ` <div style="padding:20px"> <div class="layui-form-item"> <label class="layui-form-label">职位名称</label> <div class="layui-input-block"> <input type="text" id="add_name" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">职位代码</label> <div class="layui-input-block"> <input type="text" id="add_code" class="layui-input"> </div> </div> </div> `, btn: ['保存', '取消'], yes: function (index) { $.post('/JobManagem/AddJob', { JobName: $('#add_name').val(), JobCode: $('#add_code').val() }, function (res) { if (res.code == 0) { layer.close(index); Search(); // 刷新列表 } else { layer.msg('操作失败：' + res.msg); } }); } }); } // 编辑职位弹窗 function EditJob(data) { layer.open({ type: 1, title: '编辑职位', content: ` <div style="padding:20px"> <div class="layui-form-item"> <label class="layui-form-label">职位名称</label> <div class="layui-input-block"> <input type="text" id="edit_name" value="${data.JobName}" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">职位代码</label> <div class="layui-input-block"> <input type="text" id="edit_code" value="${data.JobCode}" class="layui-input"> </div> </div> </div> `, btn: ['更新', '取消'], yes: function (index) { $.post('/JobManagem/UpdateJob', { ID: data.ID, JobName: $('#edit_name').val(), JobCode: $('#edit_code').val() }, function (res) { if (res.code == 0) { layer.close(index); Search(); } else { layer.msg('更新失败：' + res.msg); } }); } }); } // 删除职位 function DeleteJob(data, obj) { layer.confirm('真的删除行 [' + data.JobName + '] 么', function (index) { $.post('/JobManagem/DeleteJob', { ID: data.ID }, function (res) { if (res.code == 0) { obj.del(); layer.close(index); } else { layer.msg('删除失败：' + res.msg); } }); }); } // 查询重载 function Search() { var nameVal = $('input[name="name"]').val().trim(); var codeVal = $('input[name="code"]').val().trim(); tableIns.reload({ where: { name: nameVal, code: codeVal }, page: { curr: 1 } // 重置分页 }); } </script> </body> </html> 这是一个vs.net mvc +layui+sqlsever数据库开发的游戏管理系统的用户管理模块，我希望你根据这段代码以及我下面提供的sql建表资料以及用户管理模块的控制器代码，研究代码风格和习惯帮我续写组织管理模块，表单要求有树形表格，给我提供完整代码表名：组织机构表（OrganizationStructure） 字段描述 字段名 数据类型 长度 是否主键 是否外键 是否必填 组织机构表主键 ID uniqueidentifier 16 1 FALSE TRUE 组织机构名称 OrgName varchar 200 0 FALSE TRUE 组织机构代码 OrgCode varchar 200 0 FALSE FALSE 级别 Leve int 4 0 FALSE FALSE 父节点 ParentId uniqueidentifier 16 0 FALSE FALSE 创建时间 CreateDate datetime 8 0 FALSE FALSE 修改时间 ModifyDate datetime 8 0 FALSE FALSE
最新发布
07-11
<think>好的，我现在需要根据用户提供的代码和数据库表结构来续写组织管理模块。首先，我需要仔细分析用户提供的现有代码，了解他们的开发风格和习惯。 用户提供的前端页面使用了Layui框架，结合了MVC架构，后端是...
DOCTYPE中SYSTEM和PUBLIC区别
softmanfly的专栏
08-26 1841
HTML Declaration DOCTYPEs are required for legacy reasons. HTML is responsible for telling a Web browser how text and other objects in a Web Page should appear. As per HTML standards, each HTM
tomcat错误：java.io.FileNotFoundException: Could not resolve XML resource [null] with public ID [null]
壹龙的专栏
08-13 1万+
关于web.xml中引用其它xml片段，然后运行在tomcat7.0.62上出现的问题具体做法如下： 1，按模块将servelet从web.xml中拷贝出来，放到一个test.xml中，如test.xml中内容如下： <servlet> <servlet-name>testA</servlet-name>
关于在 xmlSPY 出现的错误 DOCTYPE-EXternalID的名称必须既是SYSTEM 又是PUBLIC?(转)
weixin_33861800的博客
11-03 279
 最近我在做学习xml时，遇见一个问题，我本用的是2009 xml spy后来老是出现问题 ，就是不能通过，后来我上网查了一下，发现是以一问题，不管是在2006中还是在2009中，都会出现这样的问题，要解决这样的问题解决的方法就是在把xml文档中的 &lt;!DOCTYPE 书店 SYSTEM "E:/xml/Untitled3.dtd"&gt;改成&lt;?DOCTYPE 书店 SYSTEM ...
Spring配置文件异常：White spaces are required between publicId and systemId
乱七八糟
11-08 412
1、问题： Exception in thread "main" org.springframework.beans.factory.xml.XmlBeanDefinitionStoreException: Line 1 in XML document from class path resource [Bean3.xml] is invalid; nested exception is org...
Android Studio编译错误之Build Config field cannot have a null parameter
C安君的博客
03-07 1966
问题： Build Config field cannot have a null parameter 指定错误行，如上图所示。 原因： local.properties文件中，没有声明变量 “CLENT_ID”。（注意local.properties文件是AS编译项目时，自动生成的）。具体操作如下图所示： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值