Quiero obtener el valor de la primera fila de columna en cada fila href haga clic en EDITAR. por ejemplo, si hago clic en href de la primera fila, debería recibir una alerta con el valor de la primera fila de la columna.

$(document).ready(function () {
        var jsonData = [{
            id: 'A01',
            name: 'Fadhly'
        }, {
            id: 'A02',
            name: 'Permata'
        }, {
            id: 'A03',
            name: 'Haura'
        }, {
            id: 'A04',
            name: 'Aira'
        }];

        $.each(jsonData, function (key, val) {
            var tr = '<tr>';
            tr += '<td>' + (key + 1) + '</td>';
            tr += '<td>' + val.id + '</td>';
            tr += '<td>' + val.name + '</td>';
            tr += '<td><a href="#menu1">Edit</a</td>';
            tr += '</tr>';
            $('tbody').append(tr);
        });

Mi código HTML

<script           src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1" width="100%">
<thead>
<tr>
  <th>#</th>
  <th>Id</th>
  <th>Name</th>
  <th>Action</th>
</tr>
</thead>

<tbody>
</tbody>
</table>
1
M J 17 feb. 2017 a las 18:49

3 respuestas

La mejor respuesta

Mira esto.

Esto funciona perfectamente

$(document).ready(function () {
        var jsonData = [{
            id: 'A01',
            name: 'Fadhly'
        }, {
            id: 'A02',
            name: 'Permata'
        }, {
            id: 'A03',
            name: 'Haura'
        }, {
            id: 'A04',
            name: 'Aira'
        }];

        $.each(jsonData, function (key, val) {
            var tr = '<tr>';
            tr += '<td>' + (key + 1) + '</td>';
            tr += '<td>' + val.id + '</td>';
            tr += '<td>' + val.name + '</td>';
            tr += '<td><button class="delete" data-key="' + (key + 1) + '"><a href="#menu1">Edit</a></button></td>';
            tr += '</tr>';
            $('tbody').append(tr);
        });

         $('tbody .delete a').click(function(){
             alert($(this).closest('tr').find('td:first-child').text());
         });
});

Aquí está el enlace jsfiddle actualizado. Echale un vistazo. https://jsfiddle.net/86n7qkpe/

0
Inus Saha 17 feb. 2017 a las 16:28
    $.each(jsonData, function (key, val) {
        var tr = '<tr>';
        tr += '<td>' + (key + 1) + '</td>';
        tr += '<td>' + val.id + '</td>';
        tr += '<td>' + val.name + '</td>';
        tr += '<td><button class="delete" data-key="' + (key + 1) + '" onclick="alert('+(key+1)+')"><a href="#menu1">Edit</a></button></td>';
        tr += '</tr>';
        $('tbody').append(tr);
    });

Simplemente agréguelo al atributo onclick ...

0
Jonas Wilms 17 feb. 2017 a las 15:58

Dada una estructura HTML generada de la siguiente manera con n filas agregadas dinámicamente a <tbody>:

<table border="1" width="100%">
  <thead>
    <tr>
      <th>#</th>
      <th>Id</th>
      <th>Name</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>
        <a>Edit</a>
      </td>
    </tr>
    <tr><!-- n dynamically generated rows --></tr>
  </tbody>
</table>

Puede usar el siguiente jQuery para ejecutar alert() del texto dentro de la primera columna de la fila respectiva utilizando el controlador de clics con un contexto proporcionado:

$(document).ready(function(){
    $('tbody').on('click', 'a', function(){
        var value = $(this).closest('tr').find('td').first().text();
        alert(value);
    });
});

Aquí hay un jsfiddle que demuestra la funcionalidad. Demuestra el valor de la primera columna que se alerta y muestra filas dinámicas / agregadas a través del evento de clic que ejecuta el evento en <a> clic. Esto se debe a que los elementos <a> no están directamente dirigidos, se proporcionan como contexto al elemento DOM permanente, como el que no se agregará ni eliminará.

Actualizar

Si necesita tomar otras columnas, puede estructurar la consulta jQuery usando eq() para tomar un índice basado en cero (0). Por ejemplo, si necesita la segunda columna, podría:

// first column
var value = $(this).closest('tr').find('td').eq(0).text();

// second column
var value = $(this).closest('tr').find('td').eq(1).text();

// third column
var value = $(this).closest('tr').find('td').eq(2).text();

¡Esperemos que eso ayude!

1
Alexander Staroselsky 17 feb. 2017 a las 16:56