JSFiddle - React, Tailwind, and code Playground

by yoclens avilan

HTML

<form id="idFormulario" action="">
  <input type="text" name="nombre" />
  <label for="descripcion" class="black-text ">Numero Animalito:</label>


  <input id="bt_add" type="text" name="monto" />
  <label for="descripcion" class="black-text ">Monto:</label>

  <br>
  <br>
  <br>
  <br>

  <button type="submit" name="guardar">Generar Jugada</button>

  <button id="bt_del">Eliminar</button>

  <button id="bt_delall">Eliminar Todo</button>


  <div class="col s12 m7">

    <div style=' overflow: auto; height: 250px;'>

      <table id="tabla_ventas" class='bordered responsive-table centered'>
        <thead>
          <tr>
            <th data-field='N&#186;'>ANIMALITO</th>
            <th data-field='Código'>SORTEO</th>
            <th data-field='Código'>MONTO</th>
            <th data-field='Código'>OPERACIONES</th>
          </tr>
        </thead>
      </table>

    </div>
  </div>


  </div>
</form>

JavaScript

$(document).ready(function() {

    //el que modifique
    $('#bt_add').keypress(function(event) {
      var keycode = (event.keyCode ? event.keyCode : event.which);
      if (keycode == '13') {
        agregar();
      }
    });

    $("#idFormulario").submit(function(event) {
      event.preventDefault();
    });

    $('#bt_del').click(function() {
      eliminar(id_fila_selected);
    });


    $('#bt_delall').click(function() {
      eliminarTodasFilas();
    });


  });
  var cont = 0;
  var id_fila_selected = [];

  function agregar() {
    cont++;
    var fila = '<tr class="selected" id="fila' + cont + '" onclick="seleccionar(this.id);"><td>' + cont + '</td><td>texto x defecto</td><td>0.00</td><td>confi</td></tr>';
    $('#tabla_ventas').append(fila);
    reordenar();
  }

  function seleccionar(id_fila) {
    if ($('#' + id_fila).hasClass('seleccionada')) {
      $('#' + id_fila).removeClass('seleccionada');
    } else {
      $('#' + id_fila).addClass('seleccionada');
    }
    //2702id_fila_selected=id_fila;
    id_fila_selected.push(id_fila);
  }

  function eliminar(id_fila) {
    /*$('#'+id_fila).remove();
    reordenar();*/
    for (var i = 0; i < id_fila.length; i++) {
      $('#' + id_fila[i]).remove();
    }
    reordenar();
  }

  function reordenar() {
    var num = 1;
    $('#tabla_ventas tbody tr').each(function() {
      $(this).find('td').eq(0).text(num);
      num++;
    });
  }

  function eliminarTodasFilas() {
    $('#tabla_ventas tbody tr').each(function() {
      $(this).remove();
    });

  }