comparar si un valor es menor que otro en una tabla jquery

publicado por: Anonymous

Buenas, necesito ayuda para realizar lo siguiente:

Necesito comparar si un valor de una columna es menor o mayor que otra columna dentro de una tabla.

introducir la descripción de la imagen aquí

Tengo avanzado el siguiente codigo:

_x000D_

_x000D_

$('.a').on('click',function(){_x000D_
var trPrincipal = this.offsetParent.parentElement; //Buscamos el TR principal_x000D_
// var firstName = trPrincipal.children[0].outerText; //Capturamos el FirstName_x000D_
var idproducto=trPrincipal.children[0].outerText;_x000D_
var nombreprod=trPrincipal.children[1].outerText;_x000D_
var peso=trPrincipal.children[3].outerText+' '+trPrincipal.children[2].outerText;_x000D_
var precio=trPrincipal.children[5].outerText;_x000D_
var stock=trPrincipal.children[6].outerText;_x000D_
// var lastName = trPrincipal.children[1].outerText+' '+trPrincipal.children[2].outerText; //Capturamos el LastName_x000D_
_x000D_
$(".othertable").append("<tr><td>"+_x000D_
idproducto+"</td><td>"+_x000D_
nombreprod_x000D_
+"</td><td>"+_x000D_
peso+"</td><td>"+_x000D_
stock+"</td><td>"+precio+"</td><td>"+"<input type='number' placeholder='Ingresar cantidad'/></td><td><p class='subTotal'></p></td><td><input type='button' class='btneli' id='idbotoneli' value='Eliminar'></td></tr>");_x000D_
  trPrincipal.style.display = "none"; //Ocultamos el TR de la Primer Tabla_x000D_
  var btn_ = document.querySelectorAll(".btneli"); // Buscamos todos los elementos que tengan la clase .btneli_x000D_
  for(var a in btn_){ //Iteramos la variable btn__x000D_
var b = btn_[a];_x000D_
if(typeof b == "object"){ //Solo necesitamos los objetos_x000D_
  b.onclick = function (){ //Asignamos evento click_x000D_
    var trBtn = this.offsetParent.parentElement; // buscamos el tr principal de la segunda tabla_x000D_
    var firstNameBtn = trBtn.children[0].outerText; //Capturamos el FirstName de la segunda tabla_x000D_
    trBtn.remove(); // eliminamos toda la fila de la segunda tabla_x000D_
    var tbl = document.querySelectorAll(".table td:first-child"); //Obtenemos todos los primeros elementos td de la primera tabla_x000D_
    for(var x in tbl){ //Iteramos los elementos obtenidos_x000D_
      var y = tbl[x];_x000D_
      if(typeof y == "object"){ //solo nos interesan los object_x000D_
        if (y.outerText == firstNameBtn){ //comparamos el texto de la variable y vs el firstNameBtn_x000D_
           var t = y.parentElement; //capturamos el elemento de la coincidencia_x000D_
          t.style.display = ""; //actualizamos el estilo display dejándolo en vacío y esto mostrará nuevamente la fila tr de la primera tabla_x000D_
        }_x000D_
      }_x000D_
    }_x000D_
  }_x000D_
} //Termina onclick_x000D_
  }//Termina For_x000D_
_x000D_
    //Emprezamos buscando todos los inputs tipo Number_x000D_
  var a = document.querySelectorAll("input[type='number']");_x000D_
  if(a != undefined || a != null){_x000D_
a.forEach(function (x){ //De todo el resultado iteramos con un Foreach_x000D_
  var precio = Number(x.parentElement.previousSibling.textContent); // Localizamos el Precio dentro de la tabla_x000D_
  x.onkeyup = function (){ //Asignamos un Metodo del teclado; _x000D_
    this.offsetParent.nextElementSibling.children[0].innerHTML = (precio * x.value); //Calculamos el subtotal y se lo agregamos en la columna_x000D_
    generarTotal(); // Ejecutamos una funcion que se genera el Total_x000D_
  }_x000D_
});//Foreach_x000D_
  }//if_x000D_
_x000D_
  function generarTotal(){ //Funcion que genera el total_x000D_
var a = document.querySelectorAll(".subTotal"); //Buscamos todos los subtotales_x000D_
if(a != undefined || a != null){_x000D_
  var total = new Number(); //creamos variable tipo Number llamada Total_x000D_
  a.forEach(function (x){ //Iteramos el array a que contiene los subtotales_x000D_
    total += Number(x.textContent); // Vamos sumando todos los subtotales en la variable total_x000D_
  });_x000D_
  var t_ = document.getElementById("total"); //Buscamos el input que tiene Id: total_x000D_
  t_.value = total.toFixed(2);  // le asignamos por la propiedad value el valos de todos los subtotales con 2 decimales_x000D_
  generarIGV(); // Generamos el IVa General de las Ventas con la funcion generarIGV_x000D_
}_x000D_
  }_x000D_
_x000D_
  function generarIGV(){ //Funcion que calcula el IVA_x000D_
var a = document.getElementById("total"); //Buscamos el elemento Total para extraer el total de las ventas_x000D_
var igv = 0.18; //AQUI se coloca el iva que deseas calcular, par este efecto he puesto el 18%. _x000D_
var b = document.getElementById("igv"); // Buscamos el campo con Id igv_x000D_
var operacion = Number(a.value) * igv; // calculamos el IGV_x000D_
b.value = operacion.toFixed(2); // Le asignamos al campo con Id igv el IVA mediante la propiedad value._x000D_
_x000D_
}_x000D_
});

_x000D_

<!-- Latest compiled and minified CSS -->_x000D_
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">_x000D_
_x000D_
<!-- jQuery library -->_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>_x000D_
_x000D_
<!-- Latest compiled JavaScript -->_x000D_
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>_x000D_
_x000D_
_x000D_
<div class="container">_x000D_
_x000D_
<table id="idsecond" class="table table-bordered table-hover">_x000D_
                  <thead bgcolor="skyblue">_x000D_
                    <tr>_x000D_
                <th>#</th>_x000D_
                <th>Articulo</th>_x000D_
                <th>Unidad M.</th>_x000D_
                <th>Peso/Volumen</th>_x000D_
                <th>Categoria</th>_x000D_
                <th>P.Unitario</th>_x000D_
                <th>Stock</th>_x000D_
                <th>Accion</th>_x000D_
                      _x000D_
                    </tr>_x000D_
                  </thead>_x000D_
                  <tbody>_x000D_
                    <tr>_x000D_
                    <td>1</td>_x000D_
                    <td>Arroz</td>_x000D_
                    <td>Kilo</td>_x000D_
                    <td>4</td>_x000D_
                    <td>---</td>_x000D_
                    <td>18</td>_x000D_
                      <td>12</td>_x000D_
                    <td><button class="a">Agregar</button></td>_x000D_
                    </tr>_x000D_
                    <tr>_x000D_
                    <td>2</td>_x000D_
                    <td>Sal</td>_x000D_
                    <td>Kilo </td>_x000D_
                    <td>2</td>_x000D_
                    <td>---</td>_x000D_
                    <td>14</td>_x000D_
                      <td>0</td>_x000D_
                    <td><button class="a">Agregar</button></td>_x000D_
                    </tr>_x000D_
                    <tr>_x000D_
                    <td>3</td>_x000D_
                    <td>Maiz</td>_x000D_
                    <td>Kilo</td>_x000D_
                    <td>3</td>_x000D_
                    <td>---</td>_x000D_
                    <td>12</td>_x000D_
                      <td>8</td>_x000D_
                    <td><button class="a">Agregar</button></td>_x000D_
                    </tr>_x000D_
                  </tbody>_x000D_
              </table>_x000D_
              _x000D_
              _x000D_
              _x000D_
_x000D_
<table class="othertable col-xs-12 table-condensed table-hover table-bordered">_x000D_
            <thead bgcolor="orange">_x000D_
            <tr>_x000D_
                <th>#</th>_x000D_
                <th>Nombre</th>_x000D_
                <th>Peso/Volumen</th>_x000D_
                <th>Stock</th>_x000D_
                <th>Precio</th>_x000D_
                <th>Cantidad</th>_x000D_
                <th>SubTotal</th>_x000D_
                <th>Accion</th>_x000D_
            </tr>_x000D_
            </thead>_x000D_
            <tbody>_x000D_
            </tbody>_x000D_
        </table>_x000D_
        _x000D_
<hr>_x000D_
_x000D_
  <div class="row">_x000D_
  <div class="form-group col-sm-4">_x000D_
    <label for="igv">IGV:</label>_x000D_
    <input type="text" class="form-control"disabled id="igv">_x000D_
  </div>_x000D_
    <div class="form-group  col-sm-4">_x000D_
    <label for="total">Total:</label>_x000D_
    <input type="text" class="form-control" disabled id="total">_x000D_
  </div>_x000D_
  _x000D_
</div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Agradecería enormemente la ayuda.

solución

Algo que puedes hacer con jQuery es lo siguiente:

  1. Opcional (aunque conveniente): añade una clase al input
  2. Añade un controlador para el evento change/keyup/keydown/input (o el que más te guste) que hará lo siguiente:
    1. Lee el contenido de la cuarta celda de la columna (donde está el stock)
    2. Compara el valor del input con el valor obtenido en 2.1
    3. Si es mayor: entonces el número introducido no es válido
    4. Si es menor o igual: todo está bien

El código del controlador sería así:

// controlador del evento input en la caja de texto
$(".cantidad-check").on("input", function() {
    $this = $(this);
    // leemos el valor del stock y lo parseamos como entero
    var stock = parseInt($this.closest("tr").find("td:nth-child(4)").text());
    // comprobamos si el valor introducido es mayor que el del stock disponible
    if ($this.val() > stock) {
        // si lo es, realiza alguna acción (p.e.: mensaje de error, bordes rojos, etc.)
    } else {
        // si no lo es, no hagas nada o vuelve al estado inicial (p.e. sin bordes rojos)
    }
});

Y aquí te dejo una demo. Los bordes se ponen rojos cuando el número es mayor que el stock, tú puedes poner otra acción como por ejemplo, poner el valor máximo del stock:

_x000D_

_x000D_

$('.a').on('click',function(){_x000D_
var trPrincipal = this.offsetParent.parentElement; //Buscamos el TR principal_x000D_
// var firstName = trPrincipal.children[0].outerText; //Capturamos el FirstName_x000D_
var idproducto=trPrincipal.children[0].outerText;_x000D_
var nombreprod=trPrincipal.children[1].outerText;_x000D_
var peso=trPrincipal.children[3].outerText+' '+trPrincipal.children[2].outerText;_x000D_
var precio=trPrincipal.children[5].outerText;_x000D_
var stock=trPrincipal.children[6].outerText;_x000D_
// var lastName = trPrincipal.children[1].outerText+' '+trPrincipal.children[2].outerText; //Capturamos el LastName_x000D_
_x000D_
$(".othertable").append("<tr><td>"+_x000D_
idproducto+"</td><td>"+_x000D_
nombreprod_x000D_
+"</td><td>"+_x000D_
peso+"</td><td>"+_x000D_
stock+"</td><td>"+precio+"</td><td>"+"<input type='number' class='cantidad-check' placeholder='Ingresar cantidad'/></td><td><p class='subTotal'></p></td><td><input type='button' class='btneli' id='idbotoneli' value='Eliminar'></td></tr>");_x000D_
  trPrincipal.style.display = "none"; //Ocultamos el TR de la Primer Tabla_x000D_
  var btn_ = document.querySelectorAll(".btneli"); // Buscamos todos los elementos que tengan la clase .btneli_x000D_
  for(var a in btn_){ //Iteramos la variable btn__x000D_
var b = btn_[a];_x000D_
if(typeof b == "object"){ //Solo necesitamos los objetos_x000D_
  b.onclick = function (){ //Asignamos evento click_x000D_
    var trBtn = this.offsetParent.parentElement; // buscamos el tr principal de la segunda tabla_x000D_
    var firstNameBtn = trBtn.children[0].outerText; //Capturamos el FirstName de la segunda tabla_x000D_
    trBtn.remove(); // eliminamos toda la fila de la segunda tabla_x000D_
    var tbl = document.querySelectorAll(".table td:first-child"); //Obtenemos todos los primeros elementos td de la primera tabla_x000D_
    for(var x in tbl){ //Iteramos los elementos obtenidos_x000D_
      var y = tbl[x];_x000D_
      if(typeof y == "object"){ //solo nos interesan los object_x000D_
        if (y.outerText == firstNameBtn){ //comparamos el texto de la variable y vs el firstNameBtn_x000D_
           var t = y.parentElement; //capturamos el elemento de la coincidencia_x000D_
          t.style.display = ""; //actualizamos el estilo display dejándolo en vacío y esto mostrará nuevamente la fila tr de la primera tabla_x000D_
        }_x000D_
      }_x000D_
    }_x000D_
  }_x000D_
} //Termina onclick_x000D_
  }//Termina For_x000D_
_x000D_
    //Emprezamos buscando todos los inputs tipo Number_x000D_
  var a = document.querySelectorAll("input[type='number']");_x000D_
  if(a != undefined || a != null){_x000D_
a.forEach(function (x){ //De todo el resultado iteramos con un Foreach_x000D_
  var precio = Number(x.parentElement.previousSibling.textContent); // Localizamos el Precio dentro de la tabla_x000D_
  x.onkeyup = function (){ //Asignamos un Metodo del teclado; _x000D_
    this.offsetParent.nextElementSibling.children[0].innerHTML = (precio * x.value); //Calculamos el subtotal y se lo agregamos en la columna_x000D_
    generarTotal(); // Ejecutamos una funcion que se genera el Total_x000D_
  }_x000D_
});//Foreach_x000D_
  }//if_x000D_
_x000D_
  function generarTotal(){ //Funcion que genera el total_x000D_
var a = document.querySelectorAll(".subTotal"); //Buscamos todos los subtotales_x000D_
if(a != undefined || a != null){_x000D_
  var total = new Number(); //creamos variable tipo Number llamada Total_x000D_
  a.forEach(function (x){ //Iteramos el array a que contiene los subtotales_x000D_
    total += Number(x.textContent); // Vamos sumando todos los subtotales en la variable total_x000D_
  });_x000D_
  var t_ = document.getElementById("total"); //Buscamos el input que tiene Id: total_x000D_
  t_.value = total.toFixed(2);  // le asignamos por la propiedad value el valos de todos los subtotales con 2 decimales_x000D_
  generarIGV(); // Generamos el IVa General de las Ventas con la funcion generarIGV_x000D_
}_x000D_
  }_x000D_
_x000D_
  function generarIGV(){ //Funcion que calcula el IVA_x000D_
var a = document.getElementById("total"); //Buscamos el elemento Total para extraer el total de las ventas_x000D_
var igv = 0.18; //AQUI se coloca el iva que deseas calcular, par este efecto he puesto el 18%. _x000D_
var b = document.getElementById("igv"); // Buscamos el campo con Id igv_x000D_
var operacion = Number(a.value) * igv; // calculamos el IGV_x000D_
b.value = operacion.toFixed(2); // Le asignamos al campo con Id igv el IVA mediante la propiedad value._x000D_
_x000D_
}_x000D_
  _x000D_
  _x000D_
  _x000D_
  $(".cantidad-check").on("input", function() {_x000D_
    $this = $(this);_x000D_
    var stock = parseInt($this.closest("tr").find("td:nth-child(4)").text());_x000D_
    if ($this.val() > stock) {_x000D_
      // esto se ejecuta cuando la cantidad es mayor que el stock_x000D_
      // para pruebas, yo pongo el borde rojo_x000D_
      $this.css("border-color", "red");_x000D_
    } else {_x000D_
      // esto se ejecuta cuando la cantidad es menor o igual que el stock_x000D_
      $this.css("border-color", "");_x000D_
    }_x000D_
  });_x000D_
  _x000D_
});

_x000D_

<!-- Latest compiled and minified CSS -->_x000D_
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">_x000D_
_x000D_
<!-- jQuery library -->_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>_x000D_
_x000D_
<!-- Latest compiled JavaScript -->_x000D_
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>_x000D_
_x000D_
_x000D_
<div class="container">_x000D_
_x000D_
<table id="idsecond" class="table table-bordered table-hover">_x000D_
                  <thead bgcolor="skyblue">_x000D_
                    <tr>_x000D_
                <th>#</th>_x000D_
                <th>Articulo</th>_x000D_
                <th>Unidad M.</th>_x000D_
                <th>Peso/Volumen</th>_x000D_
                <th>Categoria</th>_x000D_
                <th>P.Unitario</th>_x000D_
                <th>Stock</th>_x000D_
                <th>Accion</th>_x000D_
                      _x000D_
                    </tr>_x000D_
                  </thead>_x000D_
                  <tbody>_x000D_
                    <tr>_x000D_
                    <td>1</td>_x000D_
                    <td>Arroz</td>_x000D_
                    <td>Kilo</td>_x000D_
                    <td>4</td>_x000D_
                    <td>---</td>_x000D_
                    <td>18</td>_x000D_
                      <td>12</td>_x000D_
                    <td><button class="a">Agregar</button></td>_x000D_
                    </tr>_x000D_
                    <tr>_x000D_
                    <td>2</td>_x000D_
                    <td>Sal</td>_x000D_
                    <td>Kilo </td>_x000D_
                    <td>2</td>_x000D_
                    <td>---</td>_x000D_
                    <td>14</td>_x000D_
                      <td>0</td>_x000D_
                    <td><button class="a">Agregar</button></td>_x000D_
                    </tr>_x000D_
                    <tr>_x000D_
                    <td>3</td>_x000D_
                    <td>Maiz</td>_x000D_
                    <td>Kilo</td>_x000D_
                    <td>3</td>_x000D_
                    <td>---</td>_x000D_
                    <td>12</td>_x000D_
                      <td>8</td>_x000D_
                    <td><button class="a">Agregar</button></td>_x000D_
                    </tr>_x000D_
                  </tbody>_x000D_
              </table>_x000D_
              _x000D_
              _x000D_
              _x000D_
_x000D_
<table class="othertable col-xs-12 table-condensed table-hover table-bordered">_x000D_
            <thead bgcolor="orange">_x000D_
            <tr>_x000D_
                <th>#</th>_x000D_
                <th>Nombre</th>_x000D_
                <th>Peso/Volumen</th>_x000D_
                <th>Stock</th>_x000D_
                <th>Precio</th>_x000D_
                <th>Cantidad</th>_x000D_
                <th>SubTotal</th>_x000D_
                <th>Accion</th>_x000D_
            </tr>_x000D_
            </thead>_x000D_
            <tbody>_x000D_
            </tbody>_x000D_
        </table>_x000D_
        _x000D_
<hr>_x000D_
_x000D_
  <div class="row">_x000D_
  <div class="form-group col-sm-4">_x000D_
    <label for="igv">IGV:</label>_x000D_
    <input type="text" class="form-control"disabled id="igv">_x000D_
  </div>_x000D_
    <div class="form-group  col-sm-4">_x000D_
    <label for="total">Total:</label>_x000D_
    <input type="text" class="form-control" disabled id="total">_x000D_
  </div>_x000D_
  _x000D_
</div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *