soCapture data from a row with JQuery - Ajax - Laravel

Question

soCapture data from a row with JQuery - Ajax - Laravel

Navigation

#1 by (1 votes)

0

I have the following code that shows without any problem a table of records generated from a json array.

$.each(query, function (name, value) {
    fileTable +="<tr><td width='10%'><input type='text' name='fechaAsignacion' id='fechaAsignacion' value='"+value.fecha_asignacion+"' class='form-control' placeholder='01/01/2000'></td>"

    fileTable +="<td width='30%'><select name='nuevoEstatus' id='nuevoEstatus' class='form-control select2'>";
    @foreach($estatus as $estatu)
        fileTable +="<option value='{{$estatu->id}}'>{{$estatu->nombre}}</option>"
    @endforeach
    fileTable = fileTable + "</select></td>"

    fileTable +="<td width='50%'><input type='hidden' value='"+value.id+"' name='idEstatus'><textarea name='obs' id='obs' class='form-control'>"+value.observaciones+"</textarea></td>"

    fileTable +="<td width='10%'><a class='btn btn-sm btn-warning' onClick='editarEstatus();'><i class='fa fa-pencil'></i></a> <a class='btn btn-sm btn-danger' onClick='eliminarEstatus();'><i class='fa fa-trash'></i></a></td></tr>
});

Now, the case is at the moment of capturing the information of each row, to edit it, always send me the first record, regardless of whether it is selecting 5, 6, 20, 28, 50 ...

In the editarUsuario() function, I capture the data in row d as follows:

'idEstatus= $("#idEstatus").val();
 nuevoEstatus = $("#nuevoEstatus").val();
 fechaAsignacion = $("#fechaAsignacion").val();
 obs = $("#obs").val();'

Table only in html

<table class='table table-condensed' id='tEstatus'>
<thead class='alert alert-info'>
    <tr>
        <th scope='col'>#</th>
        <th scope='col'>Asignación</th>
        <th scope='col'>Observaciones</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <th scope='row'>1</th>"
            <td width='10%'>
                <input type='text' name='fechaAsignacion' value='"+value.fecha_asignacion+"' class='form-control' placeholder='01/01/2000'>
            </td>"
            <td width='50%'>
                <input type='hidden' value='"+value.id+"' name='idEstatus'>
                <textarea name='obs' class='form-control'>"+value.observaciones+"</textarea>
            </td>"
            <td>
                <input type='button' id='editar' class='btn btn-sm btn-warning' value='Editar'>
            </td>
    </tr>
</tbody>

"

Any suggestions or what would be the best alternative to solve my doubt. Please !!!

javascript jquery ajax laravel

asked by Erain Moya 19.09.2018 в 16:50

source

1 answer

How to go through datagrid to form an email with the data of it and remove some columns? vb.net form html and javascript div "display: none;"

score 1 · Answer 1

I try this:

$(".editar").click((e) => {

  const fila = $(e.target).parents("tr");
  let fechaAsignacion = fila.find(".fechaAsignacion").val();
  let asignacion = fila.find(".idEstatus").val();
  let obs = fila.find(".obs").val();
  alert("fechaAsignacion = "+fechaAsignacion+" asignacion = "+asignacion+" obs = "+obs)

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<table class='table table-condensed' id='tEstatus'>
  <thead class='alert alert-info'>
    <tr>
      <th scope='col'>#</th>
      <th scope='col'>Asignación</th>
      <th scope='col'>Observaciones</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope='row'>1</th>
      <td width='10%'>
        <input type='text' name='fechaAsignacion' value='20/09/2018' class='form-control fechaAsignacion' placeholder='01/01/2000'>
      </td> 
      <td width='50%'>
        <input type='hidden' value='1' name='idEstatus' class="idEstatus">
        <textarea name='obs' class='form-control obs'>observaciones</textarea>
      </td> 
      <td>
        <input type='button' id='editar' class='btn btn-sm btn-warning editar' value='Editar'>
      </td>
    </tr>
    <tr>
      <th scope='row'>2</th>
      <td width='10%'>
        <input type='text' name='fechaAsignacion' value='21/09/2018' class='form-control fechaAsignacion' placeholder='01/01/2000'>
      </td> 
      <td width='50%'>
        <input type='hidden' value='2' name='idEstatus' class="idEstatus">
        <textarea name='obs' class='form-control obs'>observaciones2</textarea>
      </td> 
      <td>
        <input type='button' id='editar' class='btn btn-sm btn-warning editar' value='Editar'>
      </td>
    </tr>
  </tbody>
</table>

I made a small table with 3 columns and in each of them the button to get the data, in the js you can see how it gets the value corresponding to its row, there I get text values and inputs, I hope it serves you and you can guide yourself.