<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;
        }
    }
}


<%@ 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文件路径。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

丈八涯

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

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

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

打赏作者

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

抵扣说明:

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

余额充值