个人中心
gpt4 book ai didi

javascript - 如何使 JSTL 编写的元素的 id 可用于脚本编写？

转载 作者：行者123 更新时间：2023-11-28 02:17:38 25 4
gpt4 key购买 nike

我正在使用 Twitter-Bootstrap 可编辑和 Java Servlet 后端开发一个 Web 应用程序。使用 JSTL 呈现表数据，并连接可编辑数据表单不起作用。JS 开发者控制台，显示未定义，因此它无法识别 JSTL 中 foreach 内部生成的元素 id。尝试将可编辑的 JS 调用包装在准备好的文档上，但不起作用。我想问题是如何使 JSTL 编写的元素的 id 可用于脚本编写。

<%--
    Document   : index
    Created on : 20/Abr/2013, 23:52:35
    Author     : Arthur
--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Bootstrap CSS-->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <!-- Bootstrap DatePicker CSS-->
        <link href="css/datepicker.css" rel="stylesheet" media="screen">
        <!-- Bootstrap Editable CSS-->
        <link href="css/bootstrap-editable.css" rel="stylesheet" media="screen">
        <!-- JQUERY -->
        <script src="js/jquery-1.9.1.min.js"></script>
        <!-- Bootstrap JS-->
        <script src="js/bootstrap-2.0.2.js"></script>
        <!-- Bootstrap DatePicker JS-->
        <script src="js/bootstrap-datepicker.js"></script>
        <!-- Bootstrap EdiTable JS-->
        <script src="js/bootstrap-editable.js"></script>
        <script type='text/javascript'>//<![CDATA[ 
            $(window).load(function(){
                $('.dropdown-toggle').dropdown();
            });//]]>  
        </script>

        <style>
            body {
                padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
                padding-bottom: 40px;
                background-color: #f5f5f5;
            }

        </style>
        <title>.:StaffGest:.</title>
    </head>
    <body>
        <!--        <div class="navbar navbar-inverse navbar-fixed-top">-->
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="#">.:StaffGest:.</a>
                    <div class="nav-collapse collapse navbar-inverse-collapse">
                        <ul class="nav">
                            <li class="active"><a href="index.jsp">Home</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Funcionários<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Novo</a></li>
                                    <li><a href="#">Editar</a></li>
                                    <li><a href="#">Apagar</a></li>
                                    <li class="divider"></li>
                                    <li class="nav-header">Pesquisar</li>
                                    <li><a href="#">Pesquisar Funcionário</a></li>
                                    <li><a href="#">Listar Todos</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                        </ul>
                    </div><!-- /.nav-collapse -->
                </div>
            </div><!-- /navbar-inner -->
        </div><!-- /navbar -->

        <div class="container">
            <h1>Lista Funcionários:</h1>
            <table class="table">  
                <thead>  
                    <tr>  
                        <th>Nome</th>  
                        <th>Apelido</th>  
                        <th>Data Nascimento</th>  
                        <th>Email</th>  
                    </tr>  
                </thead>  
                <tbody>  
                    <c:forEach items="${list}" var="employee">
                        <tr> 
                            <td><a href="#" id="firstName" name="firstName"data-type="text" data-pk="${employee.id}" data-url="employee.do" data-original-title="Nome">${employee.firstName}</a></td>  
                            <td><a href="#" id="lastName" name="lastName" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome">${employee.lastName}</td> 
                            <td><a href="#" id="dob" name="dob" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome"><fmt:formatDate value="${employee.dob}" pattern="MM/dd/yyyy"/></td> 
                            <td><a href="#" id="email" name="email" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome">${employee.email}</td> </tr> 
                        </c:forEach>

                </tbody>  
            </table>  
        </div> <!-- /container -->
        <script> 
                $('#firstName').editable({
                });
                $('#lastName').editable({
                });
                $('#dob').editable({
                });
                $('#email').editable({
                });
        </script>
    </body>
</html>

最佳答案

这是你的错误:

<c:forEach ...>
    <a id="firstName" ...>  
    <a id="lastName" ...>  
    <a id="dob" ...>  
    <a id="email" ...>  
</c:forEach>

具有相同 id 的多个元素为 illegal在 HTML 中。 HTML DOM 和 JS 中的行为未指定。

给他们一个基于例如的唯一ID迭代索引或迭代项的 ID，或者更好的是，如果它们需要在 editable() 中表现相同，则只需相同的类名:

<c:forEach ...>
    <a class="editable" ...>  
    <a class="editable" ...>  
    <a class="editable" ...>  
    <a class="editable" ...>  
</c:forEach>

这样你就可以保留你的JS DRY :

<script> 
    $('.editable').editable({
    });
</script>

关于javascript - 如何使 JSTL 编写的元素的 id 可用于脚本编写？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16171065/

25 4 0
文章推荐： iphone - iPhone 上的 Safari : CSS Positioning off by 1px
文章推荐： c++ - Clang sizeof ("literal") 优化
文章推荐： html - css 星级评定 html
文章推荐： c++ - 在有效地计算数组中第二个元素较少的对时，我哪里出错了？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com