<html:select>的重置问题

学习做一个jsp页面,其中需要重置按钮,但有些值要保留。

因此,用js做了一个清空处理。其中<html:select>的清空找了很久才找到。

function onClear() {
    var inputElements = document.getElementsByTagName("input");
    var selectElements = document.getElementsByTagName("select");
    for (i = 0; i < inputElements.length; i++) {
        if (inputElements[i] == null) {
            continue;
        }
        if (inputElements[i].type == "text") {
            inputElements[i].value = "";
        }
    }
    for (i = 0; i < selectElements.length; i++) {
        if (selectElements[i] == null) {
            continue;
        }
        if (selectElements[i] != null) {
            selectElements[i].selectedIndex = 0;
        }
    }
}


<!DOCTYPE html><br/><html lang="zh"><br/><head><br/> <meta charset="UTF-8" /><br/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/><br/> <title>征婚网注册</title><br/> <style><br/> body {<br/> font-family: "Microsoft YaHei", sans-serif;<br/> background-color: #f5f5f5;<br/> display: flex;<br/> justify-content: center;<br/> align-items: center;<br/> height: 100vh;<br/> margin: 0;<br/> }<br/> .form-container {<br/> width: 400px;<br/> padding: 30px;<br/> background: white;<br/> border-radius: 10px;<br/> box-shadow: 0 4px 10px rgba(0,0,0,0.1);<br/> }<br/> h2 {<br/> text-align: center;<br/> color: #d63384;<br/> }<br/> .input-group {<br/> margin-bottom: 15px;<br/> }<br/> label {<br/> display: block;<br/> margin-bottom: 5px;<br/> font-weight: bold;<br/> }<br/> input[type="text"], input[type="tel"], select {<br/> width: 100%;<br/> padding: 8px;<br/> border: 1px solid #ccc;<br/> border-radius: 5px;<br/> }<br/> .checkbox-group {<br/> display: flex;<br/> flex-wrap: wrap;<br/> gap: 10px;<br/> }<br/> .checkbox-item {<br/> display: flex;<br/> align-items: center;<br/> }<br/> .checkbox-item input {<br/> margin-right: 5px;<br/> }<br/> .btn-group {<br/> display: flex;<br/> justify-content: space-between;<br/> margin-top: 20px;<br/> }<br/> button {<br/> padding: 10px 20px;<br/> border: none;<br/> border-radius: 5px;<br/> cursor: pointer;<br/> }<br/> .reset-btn {<br/> background: #6c757d;<br/> color: white;<br/> }<br/> .login-btn {<br/> background: #d63384;<br/> color: white;<br/> }<br/> </style><br/></head><br/><body><br/><div class="form-container"><br/> <h2>征婚网</h2><br/> <div class="input-group"><br/> <label>性别:</label><br/> <div><br/> <input type="radio" id="male" name="gender" value="男" checked /><br/> <label for="male">男</label><br/> <input type="radio" id="female" name="gender" value="女" /><br/> <label for="female">女</label><br/> </div><br/> </div><br/> <div class="input-group"><br/> <label>出生年月:</label><br/> <select style="width: 32%; display: inline-block;"><br/> <option>请选择年</option><br/> <!-- 年份循环 --><br/> <script><br/> const year = new Date().getFullYear();<br/> for (let i = year; i >= 1950; i--) {<br/> document.currentScript.previousElementSibling.innerHTML += `<option>${i}</option>`;<br/> }<br/> </script><br/> </select><br/> <select style="width: 30%; display: inline-block;"><br/> <option>请选择月</option><br/> <script><br/> for (let i = 1; i <= 12; i++) {<br/> document.currentScript.previousElementSibling.innerHTML += `<option>${i}</option>`;<br/> }<br/> </script><br/> </select><br/> <select style="width: 30%; display: inline-block;"><br/> <option>请选择日</option><br/> <script><br/> for (let i = 1; i <= 31; i++) {<br/> document.currentScript.previousElementSibling.innerHTML += `<option>${i}</option>`;<br/> }<br/> </script><br/> </select><br/> </div><br/> <div class="input-group"><br/> <label>所在地区:</label><br/> <input type="text" value="奋斗者之家" readonly /><br/> </div><br/> <div class="input-group"><br/> <label>婚姻状况:</label><br/> <div><br/> <input type="radio" id="single" name="status" value="单身" checked /><br/> <label for="single">单身</label><br/> <input type="radio" id="unmarried" name="status" value="未婚" /><br/> <label for="unmarried">未婚</label><br/> <input type="radio" id="divorced" name="status" value="离异" /><br/> <label for="divorced">离异</label><br/> </div><br/> </div><br/> <div class="input-group"><br/> <label>学历:</label><br/> <input type="text" value="小学" readonly /><br/> </div><br/> <div class="input-group"><br/> <label>月薪:</label><br/> <input type="text" value="1000~100000" readonly /><br/> </div><br/> <div class="input-group"><br/> <label>手机号:</label><br/> <input type="tel" placeholder="请输入手机号" /><br/> </div><br/> <div class="input-group"><br/> <label>昵称:</label><br/> <input type="text" placeholder="请输入昵称" /><br/> </div><br/> <div class="input-group"><br/> <label>喜欢的类型:</label><br/> <div class="checkbox-group"><br/> <div class="checkbox-item"><input type="checkbox" /> <label>爱打篮球</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>温柔</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>可爱</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>小鲜肉</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>御姐</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>萝莉</label></div><br/> </div><br/> </div><br/> <div class="input-group"><br/> <label>自我介绍:</label><br/> <textarea rows="3" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:5px;" placeholder="请填写自我介绍"></textarea><br/> </div><br/> <div class="input-group"><br/> <div><input type="checkbox" checked /> 我承诺年满18岁、单身</div><br/> <div><input type="checkbox" checked /> 抱着严肃的态度</div><br/> <div><input type="checkbox" checked /> 真诚寻找另一半</div><br/> <div><input type="checkbox" /> 我同意注册条款和会员加入标准</div><br/> </div><br/> <div class="btn-group"><br/> <button class="reset-btn">RESET</button><br/> <button class="login-btn">登录</button><br/> </div><br/></div><br/></body><br/></html>
10-30
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%-- Created by IntelliJ IDEA. User: Administrator Date: 2025/2/28 Time: 15:47 To change this template use File | Settings | File Templates. --%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>学生列表</title> </head> <body> <h2 style="text-align: center">欢迎您,${name}</h2> <form action="<%=request.getContextPath()%>/student/selectStudentAndGrade" method="post"> 学生姓名:<input type="text" name="studentName" placeholder="请输入要搜索的学生姓名" value="${student.studentName}"> 班级:<select name="gradeId"> <option value=>请输入班级</option> <option value="1"<c:if test="${student.gradeId=='1'}">selected</c:if>>java1班</option> <option value="2"<c:if test="${student.gradeId=='2'}">selected</c:if>>java2班</option> <option value="3"<c:if test="${student.gradeId=='3'}">selected</c:if>>java3班</option> <option value="4"<c:if test="${student.gradeId=='4'}">selected</c:if>>java4班</option> </select> <input type="submit" value="查询"> <input type="button" value="重置" onclick="resetQuery()"> </form> </form> <input type="button" value="新增" onclick="location.href='<%=request.getContextPath()%>/studentAdd.jsp'"> <table> <tr> <td>序号</td> <td>学生姓名</td> <td>年龄</td> <td>出生日期</td> <td>班级</td> </tr> <c:forEach items="${studentList}" var="tea" varStatus="sta"> <tr> <td>${sta.count}</td> <td>${tea.studentName}</td> <td>${tea.age}</td> <%-- <td>${stu.birth}</td>--%> <td><fmt:formatDate value="${tea.birth}" pattern="yyyy-MM-dd"/></td> <td>${tea.grade.gradeName}</td> <%-- <td>${stu.grade.gradeName}</td>--%> <td><a href="<%=request.getContextPath()%>/student/getStudentInfo/${tea.id}">修改</a> <a href="<%=request.getContextPath()%>/student/deleteStudent/${tea.id}" onclick="if (confirm('确认是否删除')==false) {return false;}">删除</a></td> </tr> </c:forEach> </table> </body> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.9.1.js"></script> <script> function resetQuery(){ $("input[type=text]").val(""); $('select').prop('selectedIndex',0); } </script> </html>加css样式
06-13
### 如何在JSP页面中引入和使用CSS样式 在JSP页面中引入和使用CSS样式可以通过多种方式实现,包括直接嵌入CSS代码、通过`<style>`标签定义内联样式表或通过`<link>`标签引入外部CSS文件。以下是具体方法及学生列表页面的美化示例。 #### 1. 直接嵌入CSS代码 可以直接在JSP页面的`<head>`部分使用`<style>`标签来嵌入CSS代码。这种方式适用于简单的样式定义,但不推荐用于复杂的项目,因为会增加HTML代码的复杂度[^1]。 ```html <head> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; } table { width: 100%; border-collapse: collapse; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } </style> </head> ``` #### 2. 引入外部CSS文件 通过`<link>`标签引入外部CSS文件是一种更推荐的方式,因为它有助于分离内容和样式,便于维护和更新[^2]。 ```html <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> ``` 如果需要使用Bootstrap框架,可以将`href`属性设置为Bootstrap的CSS文件路径[^4]。 ```html <head> <link rel="stylesheet" type="text/css" href="../../res/bootstrap/css/bootstrap.min.css"> </head> ``` #### 3. 使用CSS选择器美化学生列表页面 以下是一个学生列表页面的美化示例,结合了表格布局和CSS样式: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>学生列表</title> <style> body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f9f9f9; } .container { width: 80%; margin: 20px auto; background-color: white; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } table { width: 100%; border-collapse: collapse; } th, td { padding: 12px; text-align: center; border-bottom: 1px solid #ddd; } th { background-color: #f2f2f2; } tr:hover { background-color: #f1f1f1; } </style> </head> <body> <div class="container"> <h2>学生列表</h2> <table> <thead> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>1001</td> <td>张三</td> <td>男</td> <td>20</td> </tr> <tr> <td>1002</td> <td>李四</td> <td>女</td> <td>22</td> </tr> </tbody> </table> </div> </body> </html> ``` #### 4. 利用伪元素简化HTML结构 如果需要进一步简化HTML结构,可以使用CSS伪元素选择器。例如,使用`section div:first-of-type`选择第一个`div`元素并为其应用特定样式[^5]。 ```css section div:first-of-type { background-color: #eaeaea; padding: 10px; border-radius: 5px; } ``` ### 注意事项 - 嵌入CSS时需注意避免与JavaScript代码冲突[^3]。 - 如果使用Bootstrap框架,确保正确配置其CSS和JS文件路径。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丈八涯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值