なぜJavaScriptは最初のレコードでのみ実行され、他のレコードでは実行されないのですか？

私は問題を抱えています。各行のデータにforeachを使用してファイルからデータを復元しました。あるタイプの基準を選択し、対応する入力が表示されていれば、問題は最初の行にのみ表示され、他の行には表示されないということです。コードのなぜJavaScriptは最初のレコードでのみ実行され、他のレコードでは実行されないのですか？

一部：

\t if (sel2.value == "actual") { 
 
\t \t document.getElementById("divactual").style.display = "block"; 
 
\t \t divT=document.getElementById("divnuevo"); 
 
\t \t divT.style.display = "none"; 
 
\t } 
 
\t if(sel2.value == "nuevo"){ 
 
\t \t document.getElementById("divnuevo").style.display = "block"; 
 
\t \t divT=document.getElementById("divactual"); 
 
\t \t divT.style.display = "none"; 
 
\t } 
 
\t if(sel2.value == "vacio"){ 
 
\t \t document.getElementById("divnuevo").style.display = "none"; 
 
\t \t divT=document.getElementById("divactual"); 
 
\t \t divT.style.display = "none"; \t \t 
 
\t } 
 
}

#divnuevo, #divactual{ 
 
\t display: block; 
 
}

      <table class="table table-list-search table-striped table-bordered text-table"> 
 
          <thead> 
 
\t \t \t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t \t \t <th class="text-center">Tipo de Regla</th> 
 
\t \t \t \t \t \t \t \t \t \t \t <th class="text-center">Nombre Campo</th> 
 
\t \t \t \t \t \t \t \t \t \t \t <th class="text-center">Nombre Regla</th> 
 
\t \t \t \t \t \t \t \t \t \t \t <th class="text-center">Pos Ini</th> 
 
\t \t \t \t \t \t \t \t \t \t \t <th class="text-center">Pos Fin</th> 
 
\t \t \t \t \t \t \t \t \t \t \t <th class="text-center">Token</th> 
 
\t \t \t \t \t \t \t \t \t \t \t <th class="text-center">Criterio</th> 
 
\t \t \t \t \t \t \t \t \t \t \t <th class="text-center">Argumentos</th> 
 
\t \t \t \t \t \t \t \t \t \t \t <th class="text-center">Descripción</th> 
 
\t \t \t \t \t \t \t \t \t \t \t <th></th>     
 
\t \t \t \t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t \t \t </thead> 
 
\t \t \t \t \t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t \t \t \t \t <c:choose> 
 
\t \t \t \t \t \t \t \t \t  \t \t <c:when test="${generals.size()==0}"> 
 
\t \t \t \t \t \t \t \t \t  \t \t <td colspan="11"><h3 class="text-danger">No existen Registros de Reglas Generales en el Archivo</h3> </td> 
 
\t \t \t \t \t \t \t \t \t   \t <br/> 
 
\t \t \t \t \t \t \t \t \t  \t \t </c:when>  
 
\t \t \t \t \t \t \t \t \t \t \t <c:otherwise> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <c:forEach items="${generals}" var="generals"> 
 
\t \t \t \t \t \t \t \t \t \t \t  \t <tr> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <td>${generals.tipoRegla}</td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <td>${generals.nomCampo}</td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <td>${generals.nomRegla}</td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <td>${generals.posIni}</td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <td>${generals.posFin}</td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <td>${generals.token}</td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="wrap"><p class="test"> ${generals.criterio} </p> </td>       
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="wrap"><p class="test2">${generals.argumentos} </p> </td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <td class="wrap"><p class="test"> ${generals.descrip} </p> </td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <c:set var="salary" scope="session" value="${generals.nomRegla}"/> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <td> \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <a role="button" 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t data-target="#Modificar_${generals.token }_${generals.tipoRegla}_${generals.nomCampo}_${generals.nomRegla}_${generals.posIni}_${generals.posFin}_${generals.criterio}" 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t class="btn btn-default modify" data-toggle="modal"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <span class="fa fa-pencil-square-o white"></span> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </a> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <form action="deletegeneral" method="POST"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <input type="hidden" value="${nombreArchivoReglas}" name="nombreArchivo" /> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <input type="hidden" value="${generals.nomRegla}" name="dnomRegla"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <button type="submit" class="btn btn-default delete" onclick="showAlert('&iquest;Est&aacute; seguro que desea eliminar la regla \n &#34; ${generals.nomRegla} &#34;?',3);"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <span class="fa fa-trash-o white"></span></button> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </form> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <!--button type="button" class="btn btn-default modify" data-toggle="modal" 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t data-target="#Modificar2"><span class="fa fa-pencil-square-o white"></span></button--> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <!--Para Modal de Modificacion--> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <div class="modal fade" id="Modificar_${generals.token}_${generals.tipoRegla}_${generals.nomCampo}_${generals.nomRegla}_${generals.posIni}_${generals.posFin}_${generals.criterio}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <div class="modal-dialog"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <div class="modal-content"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <div class="modal-header"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <button type="button" class="close" data-dismiss="modal"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <span aria-hidden="true">&times;</span> <span class="sr-only">Close</span> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </button> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <h4 class="modal-title" id="myModalLabel">Modificar Regla</h4> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <!-- Modal Body --> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <div class="modal-body"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <form action="actualizargenerals" method="POST"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <input type="hidden" value="${nombreArchivoReglas}" name="nombreArchivo" > 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <label for="exampleInputPassword1">Tipo Regla</label> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <input \t type='text' name='tipoRegla' class='form-control' id='nomCampo' readonly="readonly" placeholder=Tipo de Regla" value="${generals.tipoRegla}" required> \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t      \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <label for="exampleInputPassword1">Campo</label> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <input \t type='text' name='nombreCampo' class='form-control' id='nomCampo' placeholder="Nombre del Campo" value="${generals.nomCampo}" required> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <label \t for="exampleInputPassword1">Regla</label> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <input type='text' name='nombreRegla' readonly="readonly" class='form-control' id='nombreRegla' placeholder="Nombre de la Regla" value="${generals.nomRegla}" required /> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <label for="exampleInputPassword1">Inicio</label> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <input type='number' name='posIni' class='form-control' id='posInicial' placeholder="Posición Inicial" value="${generals.posIni}" required min="0" max="254" /> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <label \t for="exampleInputPassword1">Fin</label> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <input type='number' name='posFin' class='form-control' id='posFinal' placeholder="Posición Final" value="${generals.posFin}" min="0" max="254" required> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <c:choose> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <c:when test="${generals.tipoRegla eq 'TOKEN' }"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <label for="token">Token</label> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <input type='text' name='token' class='form-control' id='token' value="${generals.token}" placeholder="Token"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </c:when> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </c:choose> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <label for="exampleInputPassword1">Argumentos</label> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <select class="form-control" name="tipocriterio" onchange="changeFunc4(this);" > 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <option selected value="vacio" >----------</option> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="actual" >ACTUAL</option> \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <option value="nuevo" >NUEVO</option> \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <div id="divactual" name="divactual"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t div actul no mostrara mas que el valor actual 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <div id="divnuevo" name="divnuevo"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t div nuevo tendra mas elementos 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <!-- Modal Footer --> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <div class="modal-footer"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <button href="#" class="btn btnAceptar">Modificar Regla</button> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <button type="button" class="btn btnCancelar" data-dismiss="modal">Cancelar</button> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </form> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <!--Finaliza Modal de modifacion--> \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t </c:forEach> 
 
\t \t \t \t \t \t \t \t \t \t \t </c:otherwise> 
 
\t \t \t \t \t \t \t \t \t \t </c:choose> 
 
\t \t \t \t \t \t \t \t \t </tbody> 
 
\t \t \t \t \t \t \t \t </table>

アイデア？

出典

2016-07-21 favian castellanos gomez

divを追加するときにテーブル要素に囲まれていないテーブル行があります。これは整形式のHTMLではありません。 –

大丈夫、私は完全なコードを入れます。 –

これはあなたのモーダルをあなたのテーブルの真ん中に置くことを示しています。あなたのコードは基本的には終了します

これらのdivはテーブルの中に入れてはいけません。 –

ここでは、コードをclosing tableタグの下に配置する例を示します。

</table> 
<c:if test="${generals.size()!=0}"> 
    <c:forEach items="${generals}" var="generals"> 
     <!--Para Modal de Modificacion--> 
     <div class="modal fade" id="Modificar_${generals.token}_${generals.tipoRegla}_${generals.nomCampo}_${generals.nomRegla}_${generals.posIni}_${generals.posFin}_${generals.criterio}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal"> 
          <span aria-hidden="true">&times;</span> <span class="sr-only">Close</span> 
         </button> 
         <h4 class="modal-title" id="myModalLabel">Modificar Regla</h4> 
        </div> 
        <!-- Modal Body --> 
        <div class="modal-body"> 
         <form action="actualizargenerals" method="POST"> 
          <input type="hidden" value="${nombreArchivoReglas}" name="nombreArchivo" > 
          <label for="exampleInputPassword1">Tipo Regla</label> 
          <input type='text' name='tipoRegla' class='form-control' id='nomCampo' readonly="readonly" placeholder=Tipo de Regla" value="${generals.tipoRegla}" required> 


          <label for="exampleInputPassword1">Campo</label> 
          <input type='text' name='nombreCampo' class='form-control' id='nomCampo' placeholder="Nombre del Campo" value="${generals.nomCampo}" required> 


          <label for="exampleInputPassword1">Regla</label> 
          <input type='text' name='nombreRegla' readonly="readonly" class='form-control' id='nombreRegla' placeholder="Nombre de la Regla" value="${generals.nomRegla}" required /> 


          <label for="exampleInputPassword1">Inicio</label> 
          <input type='number' name='posIni' class='form-control' id='posInicial' placeholder="Posición Inicial" value="${generals.posIni}" required min="0" max="254" /> 

          <label for="exampleInputPassword1">Fin</label> 
          <input type='number' name='posFin' class='form-control' id='posFinal' placeholder="Posición Final" value="${generals.posFin}" min="0" max="254" required> 

          <c:choose> 
           <c:when test="${generals.tipoRegla eq 'TOKEN' }"> 
            <label for="token">Token</label> 
            <input type='text' name='token' class='form-control' id='token' value="${generals.token}" placeholder="Token"> 
           </c:when> 
          </c:choose> 

          <label for="exampleInputPassword1">Argumentos</label> 
          <div class="row"> 

           <select class="form-control" name="tipocriterio" onchange="changeFunc4(this);" > 
            <option selected value="vacio" >----------</option> 
            <option value="actual" >ACTUAL</option> 
            <option value="nuevo" >NUEVO</option> 
           </select> 

           <div id="divactual" name="divactual"> 
            div actul no mostrara mas que el valor actual 
           </div> 

           <div id="divnuevo" name="divnuevo"> 
            div nuevo tendra mas elementos 
           </div> 
          </div> 

          <!-- Modal Footer --> 
          <div class="modal-footer"> 
           <div class="row"> 
            <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6"> 
             <button href="#" class="btn btnAceptar">Modificar Regla</button> 
            </div> 

            <div class="col-md-6 col-xs-6 col-sm-6 col-lg-6"> 
             <button type="button" class="btn btnCancelar" data-dismiss="modal">Cancelar</button> 
            </div> 
           </div> 
          </div> 
         </form> 
        </div> 
       </div> 
      </div> 
     </div> 

     <!--Finaliza Modal de modifacion--> 
    </c:forEach> 
</c:if>

したがって、モーダルコードを移動してそのまま残ります。

編集：ここでは

は、現在の選択ボックスの隣の要素だけターゲットにするjQueryの中で書かれたあなたのchangeFunc4機能の例です。

function changeFunc4(sel2){ 
var sel = $(sel2); 
if (sel.val() == "actual") { 
     sel.siblings(".divactual").show(); 
     sel.siblings(".divnuevo").hide(); 
    } 
    if(sel.val() == "nuevo"){ 
     sel.siblings(".divnuevo").show(); 
     sel.siblings(".divactual").hide(); 
    } 
    if(sel.val() == "vacio"){ 
     sel.siblings(".divnuevo").hide(); 
     sel.siblings(".divactual").hide();  
    } 
}

注意が必要なので、これはCSSクラス参照を使用していますdivを更新してクラスを追加する例えば

<div id="divactual" class="divactual" name="divactual"> 
    div actul no mostrara mas que el valor actual 
</div>

出典

2016-07-22 00:32:19

、ありがとう、最初の行でのみ動作し、他の行では動作しません。要素divを非表示にして表示します。

なぜJavaScriptは最初のレコードでのみ実行され、他のレコードでは実行されないのですか？

答えて