My jsp page not support javascript

本文介绍了一个使用HTML和JavaScript实现页面元素可见性切换及按钮操作的示例。通过具体的代码片段展示了如何定义页面结构,并利用JavaScript进行事件监听与DOM操作。

<%@ taglib uri="emed-html" prefix="html"%>
<%@ taglib uri="emed-logic" prefix="emed" %>
<%@ page contentType="text/html;charset=utf-8"%>
<html>
<head>
</head>
<body>
<script language="JavaScript">
swithSignle = function (id){
alert("vvvvvvvvvvvvvvvvvv");
alert(id);
var obj = document.getElementById(id);

if (obj.style.visibility == "visible"){
obj.style.visibility = "hidden";
obj.style.position = "absolute";
}
else{
obj.style.visibility = "visible";
obj.style.position = "relative";
}
}

</script>
<fmt:bundle basename="resourceBundle">
<form name='form_<c:out value="${requestScope.responseId}"/>'>
<!-- 开始循环 -->
<table class="portlet-table">
<html:define name="output" id="list" property="advicesGroupBean" scope="request" toScope="page" />
<emed:forEach items="${list}" var="item" varStatus="ii">

<tr id="GroupTd">
<td colspan="2">
<span class="portlet-span">
<b><html:write name="item" property="groupField"/>:</b>  
<html:write name="item" property="recordNum"/>条危机 </span>
</td>
<td class="portlet-table-td-right"><a href=""><span class="portlet-span">More...</span></a></td>
</tr>
<tr>

<td colspan="3" align="center">
<a href="#" onclick="javascript:switchSingle('news_detail');"><span id="span1" style="FONT-SIZE: 12pt;COLOR: #C0C0C0;">点击查看</span></a>
<input name='button1' type='button' class='portlet-form-button' value='cccc' onclick="javascript:submitSearch('news_detail');" />
</td>
</tr>

<tr >
<td colspan="3">
<div id="news_detail" style="visibility: hidden; position: absolute">
<table border="0">
<emed:forEach items="${item.detailbean}" var="itemd" varStatus="jj">
<tr>
<td width="120">
[<html:hashwrite name="itemd" property="crawl_media_date"/>]
</td>
<td width="100" align="center">
<html:hashwrite name="itemd" property="crawl_media_name"/>
</td>
<td class="portlet-item">
<a href="<html:hashwrite name="itemd" property="crawl_url"/>" title='<html:hashwrite name="itemd" property="crawl_title"/>' ><html:hashwrite name="itemd" property="crawl_title" showMaxLength="30" /></a>
</td>
</tr>
</emed:forEach>
</table>
</div>
</td>
</tr>

</emed:forEach>
</table>
<!-- 循环结束 -->
</form>
</fmt:bundle>
</body>
</html>
<think>我们正在讨论的是在JSP页面中创建按钮(或按钮样式的链接)的方法。根据用户的问题,他可能已经阅读了之前关于如何用a标签制作按钮样式的回答,现在想了解如何在JSP页面中创建按钮。这里我们需要注意,JSP页面中创建按钮和HTML中是一样的,因为JSP最终会生成HTML。但是,用户可能是在JSP开发环境中,所以我们可以结合JSP的一些特性(如动态生成链接、参数传递等)来讲解。 根据引用[1][2][3]的内容,我们可以知道在IDEA中创建JSP项目的基本步骤,但用户现在的问题是如何在JSP页面中创建按钮。因此,我们重点讲解在JSP页面中创建按钮的几种方式,并可能结合JSP的特性(如EL表达式、JSTL等)来动态生成按钮。 我们将提供以下几种方法: 1. 使用HTML的button标签,并通过onclick事件跳转(适用于需要执行JavaScript操作的情况) 2. 使用input标签(type="button")创建按钮 3. 使用a标签并添加CSS样式使其看起来像按钮(之前已经介绍过,这里可以再提一下) 4. 使用表单(form)中的提交按钮(submit)来提交表单到另一个页面(这是常见的跳转方式,特别是需要传递参数时) 另外,我们还可以结合JSP动态生成按钮的文本、链接或参数。 下面我们开始组织回答。</think>### 在JSP页面中创建按钮的完整指南 在JSP页面中创建按钮主要有三种方法,以下是详细实现步骤(基于IDEA开发环境): --- #### 方法1:使用纯HTML按钮(基础方案) ```jsp <!-- 普通按钮 --> <button type="button">普通按钮</button> <!-- 带点击事件的按钮 --> <button type="button" onclick="alert('按钮被点击')">事件按钮</button> <!-- 跳转按钮 --> <button type="button" onclick="window.location.href='target.jsp'">跳转按钮</button> ``` --- #### 方法2:使用表单按钮(推荐用于数据提交) ```jsp <form action="processForm.jsp" method="post"> <!-- 提交按钮 --> <input type="submit" value="提交表单"> <!-- 带参数的按钮 --> <input type="hidden" name="action" value="delete"> <button type="submit">删除数据</button> <!-- 重置按钮 --> <input type="reset" value="重置表单"> </form> ``` --- #### 方法3:样式化链接为按钮(视觉一致性) ```jsp <style> .btn { display: inline-block; padding: 8px 16px; background: #4285f4; color: white !important; /* 覆盖链接默认样式 */ text-decoration: none; border-radius: 4px; border: 1px solid #357ae8; cursor: pointer; font: inherit; /* 继承父元素字体 */ } </style> <a href="nextPage.jsp" class="btn">链接样式按钮</a> ``` --- ### 在IDEA中创建JSP页面的步骤(参考引用[1][2]) 1. **创建Web项目**: - 右键项目 → Add Framework Support → 勾选Web Application(4.0) - 自动生成`WEB-INF/web.xml`文件 2. **添加JSP文件**: ```markdown src/main/webapp/ ├─ index.jsp # 创建在此目录 └─ WEB-INF/ ``` 3. **配置输出路径**(引用[1]): - File → Project Structure → Modules → Paths - 设置Output path为`WEB-INF/classes` 4. **添加服务器依赖**(引用[4]): - Project Structure → Libraries → 添加Tomcat的lib目录 --- ### 动态按钮示例(JSP + EL表达式) ```jsp <%-- 根据条件显示不同按钮 --%> <c:choose> <c:when test="${user.role == 'admin'}"> <button class="btn-danger">删除用户</button> </c:when> <c:otherwise> <button class="btn-basic">普通操作</button> </c:otherwise> </c:choose> <%-- 循环生成按钮 --%> <c:forEach items="${products}" var="product"> <button onclick="addToCart(${product.id})"> ${product.name} - ¥${product.price} </button> </c:forEach> ``` --- ### 常见问题解决 1. **按钮点击无响应**: - 检查是否缺少`type="submit"`(表单按钮) - 确认JavaScript控制台无错误(事件按钮) 2. **样式不生效**(引用[4]): ```jsp <!-- 确保CSS正确引入 --> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css"> ``` 3. **表单提交乱码**: ```jsp <%-- 在JSP顶部添加 --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> ``` --- > **最佳实践**:对于数据操作使用表单按钮,页面导航使用样式化链接按钮,动态交互使用JavaScript事件按钮[^1][^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值