1

Resulta que estoy generando una tabla de manera dinámica con php y en dicha tabla agrego un select, un input y un botón, y a su vez a estos elementos les agrego un id, para enviar estos elementos a una base de datos, pero resulta que como ya saben al momento de tener varios elementos con los mismo id habria problema es que solo servirá para el primer botón , la tabla queda así:

$('#cargar').click(function(){
    alert($('#pys').val()); 
    alert($('#pass').val());
	});
td, th{
	border: 1px solid black;
	text-align: center;
}

td{
	font-size: 10px;
}

table{
	margin-top: 10px;
	border-collapse: collapse !important;
}

.sin_borde{
	border: 0; 
	padding-left: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="informes">
  <tbody>
    <tr>
      <th>Estudiante</th>
      <th>Informe</th>
      <th>Paz y salvo</th>
      <th>Password</th>
      <th class="sin_borde"></th>
     </tr>
     <tr>
      <td> <input type="hidden" value="1" id="codigo_estudiante">           CARLOS ARTURO  MAESTRE</td><td id="boletin">MI-LIBRITO-DE-         LAS-VOCALES-PARA-RECORTAR.pdf</td>
      <td id="paz">
			  <select class="selet" id="pys">
				  <option value="1">Si</option>
					 <option value="0">No</option>
				</select>
			</td>
      <td><input type="text" class="password" name="pass"                      id="pass" value="CkhRQyUX">
      </td>
      <td class="sin_borde" id="autorizar"><input type="button"             value="Autorizar" id="cargar">
      </td>
     </tr>
     <tr>
      <td> <input type="hidden" value="15" id="codigo_estudiante">            HANNY MICHELL CARPINTERO GARCIA
      </td>
      <td id="boletin">MI-LIBRITO-DE-LAS-VOCALES-PARA-                                    RECORTAR.pdf
      </td>
      <td id="paz">
			  <select class="selet" id="pys">
				  <option value="1">Si</option>
					<option value="0">No</option>
				</select>
			</td>
      <td><input type="text" class="password" name="pass" id="pass"            value="NLqwZNtj">
       </td>
       <td class="sin_borde" id="autorizar"><input type="button"             value="Autorizar" id="cargar">
       </td>
      </tr>
  </tbody>
</table>

la idea es que si presiono el segundo boton me muestre por alert la información de la segunda fila y así sucesivamente.

Agradeceria mucho la ayuda.

1
  • Hola @Dev. Joel, me podrias ayudar con este problema que tengo, gracias de antemano Commented el 14 may. 2020 a las 3:19

2 respuestas 2

3

He realizado algunas modificaciones mínimas a la estructura, te dejo la solución acá:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
         td, th{
         border: 1px solid black;
         text-align: center;
         }
         td{
         font-size: 10px;
         }
         table{
         margin-top: 10px;
         border-collapse: collapse !important;
         }
         .sin_borde{
         border: 0; 
         padding-left: 5px;
         }
      </style>
      <title>Document</title>
   </head>
   <body>
      <table id="informes">
         <tbody>
            <tr>
               <th>Estudiante</th>
               <th>Informe</th>
               <th>Paz y salvo</th>
               <th>Password</th>
               <th class="sin_borde"></th>
            </tr>
            <tr class="selectablerow">
               <td class="codigo_estudiante">
                   <input type="hidden" value="1">CARLOS ARTURO  MAESTRE
                </td>
               <td class="boletin">
                   MI-LIBRITO-DE-LAS-VOCALES-PARA-RECORTAR.pdf
                </td>
               <td class="paz">
                  <select class="selet" id="pys">
                     <option value="1">Si</option>
                     <option value="0">No</option>
                  </select>
               </td>
               <td class="pass">
                    <input type="text" class="password" name="pass" value="CkhRQyUX">
               </td>
               <td class="sin_borde autorizar">
                   <input type="button" value="Autorizar" class="cargar">
               </td>
            </tr>
            <tr class="selectablerow">
                <td class="codigo_estudiante">
                    <input type="hidden" value="2">César Todo Poderoso
                 </td>
                <td class="boletin">
                    ESTO-NO-ES-UN-PDF.pdf
                 </td>
                <td class="paz">
                   <select class="selet" id="pys">
                      <option value="1">Si</option>
                      <option value="0" selected="selected">No</option>
                   </select>
                </td>
                <td class="pass">
                     <input type="text" class="password" name="pass" value="Cocodrilo123">
                </td>
                <td class="sin_borde autorizar">
                    <input type="button" value="Autorizar" class="cargar">
                </td>
             </tr>
         </tbody>
      </table>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script>
          $(function(){
              $('body').on('click', '.cargar', function(){
                  selectedRow = $(this).parents('.selectablerow')
                  row = {
                    'codigo_estudiante' : selectedRow.find("td.codigo_estudiante input").val(),
                    'boletin' : selectedRow.find("td.boletin").text().trim(),
                    'paz' : selectedRow.find("td.paz select").val(),
                    'pass' : selectedRow.find("td.pass input").val(),
                  }
                  console.log("Valores", row)
              })
          })
      </script>
   </body>
</html>
COPY TO CLIPBOARD	 SELECT ALL
© FreeFormatter.com - FREEFOR

En resumen pasé todo a clases y trabajé en base a selectores padres e hijos (Ubicar las clases estrategicamente facilita todo). Asocié el evento al body en caso que luego cargues filas mediante ajax, para que el evento siga funcionando en las filas nuevas.

Dejé el resultado impreso en consola, ahí es donde operas tu lógica luego.

7
  • Gracias @César Alejandro M mañana lo escribo en mi documento y te cuento Commented el 14 may. 2020 a las 3:32
  • @sebastianvalencia Éxito ! Commented el 14 may. 2020 a las 3:34
  • 2
    @sebastianvalencia de hecho edite la respuesta de cesar para poder que se pueda ver el resultado directamente desde aquí si lo deseas (puse el codigo en un snippet).
    – Layer
    Commented el 14 may. 2020 a las 3:38
  • Excelente aporte @Riven :) Commented el 14 may. 2020 a las 3:40
  • @Riven muchas gracias por ordenar la respuesta Commented el 14 may. 2020 a las 3:41
1

Lo que podrias hacer es cambiar los id por una clase:

<td class="sin_borde" id="autorizar"><input type="button"             value="Autorizar" id="cargar">

y en tu funcion, cambias el símbolo de id (#) por el de clase (.) y agregas el elemento con el que estas trabajando

$('Button.cargar').click(function(){
alert($('#pys').val()); 
alert($('#pass').val());
});

Esto es porque la clase sirve para controlar varios elementos que comparten un mismo funcionamiento (como tus botones que en este caso comparten la misma funcion, aunque con diferentes parametros) mientras que el ID solo sirve para manejar un elemento en particular (un ID es por eso un identificador único.

5
  • Hola @Henry Peregrino, y a mis otros elementos también??? o solo al botón??? Commented el 14 may. 2020 a las 2:11
  • Hola @Henry Peregrino, probe como me dijiste, pero no me funciono Commented el 14 may. 2020 a las 2:24
  • 1
    No funciono porque aunque utilizar una clase es mucho mas conveniente (y de hecho deberias hacerlo igual tomando en cuenta la respuesta de Henry), solamente usar una clase no resuelve el problema en este caso.
    – Layer
    Commented el 14 may. 2020 a las 2:30
  • @Riven, que puedo hacer entonces???, me puedes ayudar???? Commented el 14 may. 2020 a las 3:20
  • Uffff la verdad te ayudaria, pero el html esta bastante desordenado, me pierdo viendo a vecez intentando ver el principio y fin de cada elemento, deberias considerar organizar el codigo y editar la pregunta... pero te doy una pista, la idea es que cada boton que tengas haga parte de un contenedor que contiene tambien a tus select e inputs, en tu caso ese contenedor son los td, lo que debes hacer es enfocarte en los td y no en obtener cada elemento directamente con el id (ayudate con los td que contienen a tus input).
    – Layer
    Commented el 14 may. 2020 a las 3:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.