Because he shows me value by pressing the table

Question

Because he shows me value by pressing the table

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have the following method where I get a text field from the table.

function save(){
    $('#tableDespacho tr').on('click', function(){
        //var first = $(this).find('td:first').html();
        var area = $(this).find('td:eq(0)').text();
        var fecha = $(this).find('td:eq(1)').text();
        var cantidad = $(this).find('td:eq(5)').text();
        console.log(cantidad);
    });
}

I call this method with a button:

<button type="button" onclick="save()" class="btn btn-sm btn-success done" data-toggle="tooltip" data-placement="top" title="Recepcionar Item" data-original-title="Remove item"> 
    <i class='fa fa-check fa-lg '></i>
</button>

Apart I have a button to edit the amount of the table.

$('#tableDespacho').editable({
    container: 'body',
    selector: 'td.Cantidad',
    title: 'Cantidad',

    validate: function(value) {
        if ($.trim(value) == '') {
            return 'Este campo es necesario';
        }
        var regex = /^[0-9]+$/;
        if(! regex.test(value)) {
            return 'Solo Numeros!';
        }
        //if ($(this).text() >= value) {
        //    return ' Excede cantidad';
        //}
    }
});

At first it works fine I can edit the quantities and pressing the button shows me the quantity. But then edit and show the amount if I press the table it calls me to the function save .

Why is this?

table

<table id="tableDespacho" class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
     <tr>
      <th class="th-sm">CodPieza</th>
      <th class="th-sm">Cantidad</tr>
  </thead>
<tbody>
  <?php include_once('include/conexion.php');
   $sql = "SELECT * FROM Despacho_DetalleEntreAreas ORDER BY Fecha DESC";
   $result = mysqli_query($conexion,$sql);
       if ($result) {
      $resultCheck = mysqli_num_rows($result);
          if ($resultCheck >0) {
          while ($row = mysqli_fetch_assoc($result)) { ?>
           <tr>
              <td>
               <?php echo $row['Desc_Area'] ?>
             </td>
             <td data-name="Cantidad" class="Cantidad <?php echo $text ?>" data-type="text">
               <?php echo $row['Cantidad'] ?>
             </td>

               <td>
               <button type="button" onclick="save()" id="btn" class="btn btn-sm btn-success done" data-toggle="tooltip" data-placement="top" title="Recepcionar Item" data-original-title="Remove item"> <i class='fa fa-check fa-lg mb-1 white-text'></i></button>
              </td>
               </tr>
            <?php } } } ?>
           </tbody> 
     </table>

javascript html

asked by MoteCL 13.09.2018 в 17:33

source

2 answers

1

It's obvious, you're creating the same event on the button and the <tr> of the table.

That is, when you hit the button, you are creating a function that does the same but for your <tr> , so if you hit the table for the first time it will not do anything, but if you hit the button and then to The table has already created the event. You can solve it like that. First you must put an id to the button, for example id="btn"

$(document).on( 'click', '#btn', function(e){
  //Esto para detener el handler nativo del botón y evitar que se propague la función a nodos más bajos
  e.preventDefault(); e.stopPropagation();
  //Primero buscamos la tabla y sus '<tr>'
  var tabla = $('#tableDespacho tr');
  //Despues empezamos a sacar la información justo como lo hiciste
  var first = tabla.find('td:first').html(),
      area = tabla.find('td:eq(0)').text(),
      fecha = tabla.find('td:eq(1)').text(),
      cantidad = tabla.find('td:eq(5)').text();
      console.log(cantidad);
    });
});

I do not have a testing environment, but I hope it works for you.

Greetings

answered by 13.09.2018 в 17:45

The global variable does not work for me Object reference not set as an instance of an object. Runat="Server" ASP

score 1 · Accepted Answer

It's because in the save() function you generate a Listener . Now, what is a listener? Well basically it is a function that is executed every time a certain event happens, the event that you associated to that listener was click and you associated it to the selector '#tableDespacho tr' .

In other words, every time you make a click in a tr element that is a child of the element with id #tableDespacho the associated code is executed, which is the following:

// esta es la funcion que tu hiciste
function(){
    //var first = $(this).find('td:first').html();
    var area = $(this).find('td:eq(0)').text();
    var fecha = $(this).find('td:eq(1)').text();
    var cantidad = $(this).find('td:eq(5)').text();
    console.log(cantidad);
}

I propose the following change to your code

function save(btn){
    var area = $(btn).closest('tr').find('td:eq(0)').text();
    var fecha = $(btn).closest('tr').find('td:eq(1)').text();
    var cantidad = $(btn).closest('tr').find('td:eq(2)').text();
    console.log(cantidad);
}

td {
  border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <th>Área</th>
  <th>Fecha</th>
  <th>Cantidad</th>
  <th></th>
</tr>
<tr>
  <td>area1</td>
  <td>fecha1</td>
  <td>5</td>
  <td><button onclick="save(this)">Mostrar cantidad</button></td>
</tr>
<tr>
  <td>area2</td>
  <td>fecha2</td>
  <td>15</td>
  <td><button onclick="save(this)">Mostrar cantidad</button></td>
</tr>
<tr>
  <td>area3</td>
  <td>fecha3</td>
  <td>25</td>
  <td><button onclick="save(this)">Mostrar cantidad</button></td>
</tr>
</table>