jQuery怎么获取<c:forEach>标签的值

本文介绍了一种使用jQuery的方法,可以在&lt;c:forEach&gt;标签遍历元素时轻松获取每个元素的ID。通过示例展示了如何为遍历生成的每个元素绑定点击事件,并在点击时弹出该元素的ID。

最近做项目中要获取到<c:forEach>标签遍历出的元素的id,之前都是通过在遍历出的元素中添加onclick()函数,再通过原生的js来触发该函数实现。这次分享以下jQuery的实现。

HTML代码:

[html]  view plain  copy
  1. <table>  
  2.     <tbody>  
  3.         <c:forEach items="${map.list}" var="list">  
  4.             <tr class="icList" id="${list.icId }">          
  5.         <span style="white-space:pre">  </span> <th>${applList.icName }</th>  
  6.             </tr>  
  7.         </c:forEach>  
  8.     </tbody>  
  9. </table>  

jquery代码:

[javascript]  view plain  copy
  1. $(".icList").each(function(){  
  2.     $(this).click(function(){  
  3.         alert($(this).attr('id'));  
  4.     });  
  5. });  
运行结果:

点击对应的行标签,弹出提示框显示对应元素的id。

转载地址:http://blog.youkuaiyun.com/kyle313606922/article/details/77096886

把下面的source,改写成thymeleaf形式文件。 <%@ page contentType="text/html; charset=UTF-8"%> <%@ page pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%> <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%> <!DOCTYPE html> <html> <head> <!-- IEバージョン設定 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11"> <title> 会社マスタ一覧画面</title> <!-- jQuery設定 --> <script src="<c:url value="/resources/js/jquery-1.11.3.min.js" />"></script> <!-- CSS設定 --> <link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/tsocms.css" />"> <script> $(function() { $(".stockCompanyMasterListTable tr:odd").addClass("odd"); $(".stockCompanyMasterListTable tr:even").addClass("even"); }); </script> <script> <!-- function stockCompanyclearButton() { document.select.mechSubCode.value = ""; document.select.stockCompanyName.value =""; } function updateSubmitCheck() { if(!radioCheck("更新対象をラジオボタンで選択してください。")) return; stockCompanyMasterListUpdateButton(); } function deleteSubmitCheck() { if(!radioCheck("削除対象をラジオボタンで選択してください。")) return; stockCompanyMasterListDeleteButton(); } function stockCompanySearchButton() { var target = document.getElementById("stockCompanyMasterListForm"); target.action = "${pageContext.request.contextPath}/stockcompanymasterlist/select"; target.submit(); } function stockCompanyMasterListDeleteButton() { var target = document.getElementById("stockCompanyMasterListForm"); target.action = "${pageContext.request.contextPath}/stockcompanymasterdelete"; target.submit(); } function stockCompanyMasterListUpdateButton() { var target = document.getElementById("stockCompanyMasterListForm"); target.action = "${pageContext.request.contextPath}/stockcompanymasterupdate"; target.submit(); } function radioCheck(msg) { var flag = false; var elm = document.getElementsByName('selectedKey'); for (i = 0; i < elm.length; i++) { if (elm[i].checked) { flag = true; } } if (!flag) { alert(msg); return false; } return true; } //--> </script> </head> <body> <!-- <!-- ページ見出し --> <div> <h1> 会社マスタ一覧画面</h1> </div> <form:form name="select" modelAttribute="stockCompanyMasterListForm" method="post" action="${pageContext.request.contextPath}/stockcompanymasterlist/select"> <!-- 会社結果一覧表 --> <div class="stockCompanyMasterListTableAll"> <div class="keyleft"> <!-- 検索キー --> <!-- 機構加入者コード --> <div class="searchkey"> <span class="mechSubCodeKey">機構加入者コード</span> <form:input type="search" path="mechSubCode" size="45" /> </div> <!-- 会社名 --> <div class="searchkey"> <span class="stockCompanyNameKey">会社名</span> <form:input type="search" path="stockCompanyName" size="45" /> </div> <!-- Hidden検索キー --> <form:hidden path="mechSubCodeHidden" /> <form:hidden path="stockCompanyNameHidden" /> </div> <div class="keyright"> <!-- 検索ボタン --> <form:button type="submit" name="stockCompanySearchbutton" id="stockCompanySearchbutton" onclick="stockCompanySearchButton()">検索</form:button> <!-- 初期化ボタン --> <form:button type="button" name="stockCompanyclearbutton" id="stockCompanyclearbutton" onclick="stockCompanyclearButton()">初期化</form:button> </div> <div class="stockCompanyMasterListTable"> <table class="stockCompanyMasterListTable"> <thead class="stockCompanyMasterList"> <tr> <th class="radioButton"></th> <th class="mechSubCode">機構加入者コード</th> <th class="stockCompanyName">会社名</th> <th class="stockCompanyNameKana">会社名カナ</th> <th class="effectiveDate">適用開始日</th> <th class="expireDate">適用終了日</th> </tr> </thead> <tbody class="searchListBody"> <c:forEach var="detail" items="${stockCompanyMasterListForm.stockCompanyMasterListDetailFormList}" varStatus="status"> <tr> <td class="radioButton"> <form:radiobutton path="selectedKey" value="${detail.mechanismSubscriberCd},${detail.effectiveDate}" /><br> </td> <td class="mechSubCode"> <c:out value="${detail.mechanismSubscriberCd}"></c:out> </td> <td class="stockCompanyName"> <c:out value="${detail.stockcompany}"></c:out> </td> <td class="stockCompanyNameKana"> <c:out value="${detail.stockcompanyKana}"></c:out> </td> <td class="effectiveDate"> <c:out value="${detail.effectiveDate}"></c:out> </td> <td class="expireDate"> <c:out value="${detail.expireDate}"></c:out> </td> </tr> </c:forEach> </tbody> </table> </div> <div class="left"></div> <div class="right"> <!-- 新規登録ボタン --> <form:button type="button" name="stockCompanyMasterListRegisterbutton" id="stockCompanyMasterListRegisterbutton" onclick="location.href='${pageContext.request.contextPath}/stockcompanymasterregister'">新規登録</form:button> <!-- 更新ボタン --> <form:button type="button" name="stockCompanyMasterListUpdatebutton" id="stockCompanyMasterListUpdatebutton" onclick="updateSubmitCheck()">更新</form:button> <!-- 削除ボタン --> <form:button type="button" name="stockCompanyMasterListDeletebutton" id="stockCompanyMasterListDeletebutton" onclick="deleteSubmitCheck()">削除</form:button> <!-- 戻るボタン --> <form:button type="button" name="stockCompanyMasterListReturnbutton" id="stockCompanyMasterListReturnbutton" onclick="location.href='${pageContext.request.contextPath}/master'">戻る</form:button> </div> </div> </form:form> </body> </html>
07-18
<%@ 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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值