How can I get a value of a row by pressing a button in that row?

Question

How can I get a value of a row by pressing a button in that row?

Navigation

#1 by (4 votes)
#2 by (0 votes)

3

I have this function in javascript where I am directed to a PHP file which returns a file json and I show it in a table in the following way.

JavaScript Code:

$.each(students, function(calificaciones, std) {
  $('#tableStudents').append('<tr>');
  $('#tableStudents').append('<td>'+std.matricula +'</td>');
  $('#tableStudents').append('<td>'+std.Alumno+'</td>');
  $('#tableStudents').append('<td>'+std.Grupo + '</td>');
  $('#tableStudents').append('<td><button type="button" class="btn btn-success">Calificar</button></td>'
);

Where $('#tableStudents) is the ID that I gave to my tbody and what I want to do is that as each row will have its own button, and that when the certain button is pressed row bring me the Enrollment field of that row.

Any suggestions?

javascript jquery html

asked by AngelAmayaE 07.04.2018 в 22:46

source

2 answers

C / C ++ - Pointers Print array in php

score 4 · Answer 1

In the first place it is necessary to clarify that the way in which you add the row is incorrect, in fact you are only adding in the first place the tr

$('#tableStudents').append('<tr>');

What happens here is that JQuery automatically creates the ta and in turn closes the tag and then adds td after another and not within the tr that is correct.

There are several ways to do this, you can build a String of everything and do a append direct to the table, or make append to tr before created with $('tr') (example )

$('#tableStudents').append($('<tr>') //añadimos al tr
   .append('<td>'+std.matricula +'</td>')
   .... /* más filas */
); // cerramos el append a la tabla.

We also add a class that identifies the action of the button within the td ( .btncalificar ) to identify better when adding the Listener

<td><button type="button" class="btn btn-success btncalificar" >Calificar</button></td>

Using Event Delegate we add the Listener since they are dynamically added to dom , this listener must be associated with an element that exists in the Sun, in this case the table with its id.

$('#tableStudents').on('click', '.btncalificar', function(event) { ...}

Example

$('.btn').click(function(event) {
  for (var i = 0; i < 5; i++) {
    $('#tableStudents').append($('<tr>')  
    // notese que no cerrramos el append , estamos
		// añadiendo al tr
    .append('<td> Matricula '+ i + '</td>')
		.append('<td> Grupo '+ i + '</td>')
		.append('<td> Materia '+ i + '</td>')
		.append('<td> Unidad '+ i + '</td>')
		.append('<td> Calificacion '+ i + '</td>')
		.append('<td> <button type="button" class="btn btn-info btncalificar">Calificar</button></td>')
		.append('</tr>')
	 );//cerramos el append a la tabla
  }
});

$('#tableStudents').on('click', '.btncalificar', function(event) {
	//Primera fila
	console.log("Primera Fila  : " + $(this).parents('tr').find('td:first-child').text());
	//todos las columnas de la fila  
  console.log("Columnas de la Fila");
	$.each($(this).parents('tr'), function(index, val) {
		console.log($(val).text());
	});
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary">Agregar</button>
<table class="table table-bordered" id="tableStudents">
</table>

score 0 · Answer 2

I would do it in the following way in each button I have all the data, and every time I press a button I get a modal with the input

introduce a functional example

<h2>My First JavaScript</h2>
<!--
la idea principal es traer los datos de una fila, yo lo hago de la siguiente forma en la parte de html de boton le traigo un ejemplo 
-->
<html>
        <button class="massshow-modal btn btn-info" 
        data-id="34"
        data-nombre="marcos"
        data-apellido="alberto"

        ><span class="glyphicon glyphicon-edit"></span> Editar</button>

        <button class="massshow-modal btn btn-info" 
        data-id="31"
        data-nombre="marcos_3"
        data-apellido="alberto_4"

        ><span class="glyphicon glyphicon-edit"></span> Editar</button>

</html>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>


<input type='text' class='form-control' id='id_mass' maxlength='45'   required='required' autofocus>
<input type='text' class='form-control' id='nombre_mass' maxlength='45'   required='required' autofocus>
<input type='text' class='form-control' id='apellido_mass' maxlength='45'   required='required' autofocus>

<script type='text/javascript'>

  // Show a post
        $(document).on('click', '.massshow-modal', function() {
            //$('.modal-descripcion').text('Vista de los Datos');
            //$('#msdelete').text(' ');
            $('#id_mass').val($(this).data('id'));
            $('#nombre_mass').val($(this).data('nombre'));
            $('#apellido_mass').val($(this).data('apellido'));

            //$('#massModal').modal('show');
            //$('#acciones').attr('class', 'btn btn-info hibe');
            //$('#acciones').text('Visible');
            //$('#acciones').attr('disabled');

        });
</script>


</body>
</html>