将jquery代码放在jsp / jstl页面中的位置

时间：2014-03-09 19:12:51

标签： javascript jquery jsp jstl

拜托，有人可以告诉我应该将jquery代码放在我的页面下面吗？现在，当我点击第一个链接时，最后两行被隐藏，其他链接不起作用。

<c:forEach var="item" items="${usuarios}">
    <div class="row">
        <div class="col-md-3"><c:out value="${item.username}"/></div>
        <div class="col-md-3"><c:out value="${item.nome}"/></div>
        <div class="col-md-3">
            <c:forEach var="tipo" items="${item.tipo}">
                <c:out value="${tipo.nome}"/>
            </c:forEach>
        </div>
        <div class="col-md-3">
            <button type="button" class="btn btn-xs btn-link" id="botaoAuth">Autoriza&ccedil;&otilde;es</button>
            <button type="button" class="btn btn-xs btn-link" id="excluirUsuario">Excluir</button>
        </div>
    </div>

            <script>
                $("#botaoAuth").click(function(){
                    $("#<c:out value='${item.id}'/>").toggle();
                });
            </script>

    <div class="row" id="${item.id}">
        <table class="bordered">
            <tr>
                <c:forEach var="item_auth" items="${autorizacoes}">
                        <c:set var="isChecked" value="${false}"/>
                <c:forEach var="user_auth" items="${item.autorizacoes}">
                        <c:if test="${user_auth.nome == item_auth.nome}">  <!-- here compare according ID or any unique attribute -->
                            <c:set var="isChecked" value="${true}"/>
                        </c:if>
                </c:forEach>
                    <td>
                    <input type="checkbox" name="${item_auth.nome}" onclick="mudaAutorizacao(${item_auth.nome})"  <c:if test="${isChecked}">checked="checked"</c:if> />${item_auth.nome}
                    </td>
                </c:forEach>
            </tr>
        </table>
    </div>
</c:forEach>

更新001

我现在使用此代码：

<div class="container">
        <div class="row">
            <div class="col-md-3">Login</div>
            <div class="col-md-3">Nome</div>
            <div class="col-md-3">Tipo</div>
            <div class="col-md-3">#</div>
        </div>

        <c:forEach var="item" items="${usuarios}">
            <div class="row">
                <div class="col-md-3"><c:out value="${item.username}"/></div>
                <div class="col-md-3"><c:out value="${item.nome}"/></div>
                <div class="col-md-3">
                    <c:forEach var="tipo" items="${item.tipo}">
                        <c:out value="${tipo.nome}"/>
                    </c:forEach>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-xs btn-link" id="btn_004_${item.id}">Autoriza&ccedil;&otilde;es</button>
                    <button type="button" class="btn btn-xs btn-link" id="btn_005_${item.id}">Excluir</button>
                </div>
            </div>

            <div class="row" id="row_001_${item.id}">
                <table class="bordered">
                    <tr>
                        <c:forEach var="item_auth" items="${autorizacoes}">
                                <c:set var="isChecked" value="${false}"/>
                        <c:forEach var="user_auth" items="${item.autorizacoes}">
                                <c:if test="${user_auth.nome == item_auth.nome}">  <!-- here compare according ID or any unique attribute -->
                                    <c:set var="isChecked" value="${true}"/>
                                </c:if>
                        </c:forEach>
                            <td>
                            <input type="checkbox" name="${item_auth.nome}" <c:if test="${isChecked}">checked="checked"</c:if> />${item_auth.nome}
                            </td>
                        </c:forEach>
                    </tr>
                </table>
            </div>

            <script>
                $("btn_004_${item.id}").click(function(){
                    alert("clicou para visualizar autorizações do usuario ${item.nome}");
                    $("#row_001_${item.id}").toggle();
                });
            </script>

            <script>
                $("btn_005_${item.id}").click(function(){
                    alert("clicou para excluir o usuário ${item.nome}");
                    $( "#result_2" ).empty().append( "<strong> Pronto! </strong> Usuario ${item.id} excluido." );
                });
            </script>

        </c:forEach>

        <div class="alert alert-success" id="result_2">   </div>
</div>

根本不起作用。但下面的这个，在同一页面，它的工作完美。有人可以在上面的代码中看到任何错误吗？

<button type="button" class="btn btn-xs btn-link" id="btn_001">Editar atributos dos usu&aacute;rios</button>
<script>
$("#btn_001").click(function(){
    $("#campos").toggle();
});
</script>

    <table class="bordered" id="campos">
        <thead>
        <tr>    
            <th>Campo</th>
            <th>#</th>
        </tr>
        </thead>
        <tfoot>
        <tr>
            <td></td>        
            <td></td>
        </tr>
        </tfoot>
        <c:forEach var="item_campo" items="${campos}">
        <tr id="${item_campo.id}">
            <td> <input type="text" name='<c:out value="${item_campo.id}"/>' value='<c:out value="${item_campo.campo}"/>' size=20 maxlength=40> </td>        
            <td> <button type="button" class="btn btn-xs btn-link" id="btn_002_${item_campo.id}">Excluir</button> </td>
            <script>
                $("#btn_002_${item_campo.id}").click(function(){
                    $( "#result_1" ).empty().append( "<strong> Pronto! </strong> Campo Excluido." );
                });
            </script>
        </tr>
        </c:forEach>
        <tr id="novo">
            <td> <input type="text" name="novo" size=20 maxlength=40> </td>
            <td> <button type="button" class="btn btn-xs btn-link" id="btn_003">Incluir</button> </td>
            <script>
                $("#btn_003").click(function(){
                    $( "#result_1" ).empty().append( "<strong> Pronto! </strong> Campo Incluido." );
                });
            </script>
        </tr>
    </table>

    <div class="alert alert-success" id="result_1">   </div>

更新2 好的，终于有效！经过一些更改后，最终的代码是：

<div class="container">
        <div class="row">
            <div class="col-md-3">Login</div>
            <div class="col-md-3">Nome</div>
            <div class="col-md-3">Tipo</div>
            <div class="col-md-3">#</div>
        </div>

        <c:forEach var="item" items="${usuarios}">
            <div class="row">
                <div class="col-md-3"><c:out value="${item.username}"/></div>
                <div class="col-md-3"><c:out value="${item.nome}"/></div>
                <div class="col-md-3">
                    <c:forEach var="tipo" items="${item.tipo}">
                        <c:out value="${tipo.nome}"/>
                    </c:forEach>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-xs btn-link" id="btn_004_${item.id}">Autoriza&ccedil;&otilde;es</button>
                    <button type="button" class="btn btn-xs btn-link" id="btn_005_${item.id}">Excluir</button>
                </div>
            </div>

            <div class="row" id="row_001_${item.id}">
                <table class="bordered">
                    <tr>
                        <c:forEach var="item_auth" items="${autorizacoes}">
                                <c:set var="isChecked" value="${false}"/>
                        <c:forEach var="user_auth" items="${item.autorizacoes}">
                                <c:if test="${user_auth.nome == item_auth.nome}">  <!-- here compare according ID or any unique attribute -->
                                    <c:set var="isChecked" value="${true}"/>
                                </c:if>
                        </c:forEach>
                            <td>
                            <input type="checkbox" name="${item_auth.nome}" <c:if test="${isChecked}">checked="checked"</c:if> />${item_auth.nome}
                            </td>
                        </c:forEach>
                    </tr>
                </table>
            </div>                  
        </c:forEach>

        <div class="alert alert-success" id="result_2">   </div>

        <c:forEach var="item" items="${usuarios}">
            <script>
                $("#btn_004_${item.id}").click(function(){
                    alert("clicou para visualizar autorizações do usuario ${item.nome}");
                    $("#row_001_${item.id}").toggle();
                });
            </script>
        </c:forEach>

        <c:forEach var="item" items="${usuarios}">
            <script>
                $("#btn_005_${item.id}").click(function(){
                    alert("clicou para excluir o usuário ${item.nome}");
                    $( "#result_2" ).empty().append( "<strong> Pronto! </strong> Usuario ${item.id} excluido." );
                });
            </script>
        </c:forEach>

</div>

0 个答案:

没有答案
相关问题
最新问题