Operation of values add class according to result

Question

Operation of values add class according to result

Navigation

#1 by (1 votes)

1

I have three select-option with different values. What I need is that by subtracting the values add a class to the row.

This is my code (also available at JSFiddle )

$("tr").click(function() {
  id = $(this).attr("id");


  $("#" + id + ' ' + "select").each(function(cSelect) {
    $(this).data('stored-value', $(this).val());
  });

  $("#" + id + ' ' + "select").change(function() {
    var cSelected = $(this).val();
    var cPrevious = $(this).data('stored-value');
    $(this).data('stored-value', cSelected);

    var otherSelects = $("#" + id + ' ' + "select").not(this);

    otherSelects.find('option[value="' + this.value + '"]').removeAttr('disabled');
    otherSelects.find('option[value="' + this.value + '"]').attr('disabled', 'disabled');
  });

});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

<table id='example-table' class="table table-striped">
  <thead>
    <tr>
      <th>UNO 1</th>
      <th>DOS 2</th>
      <th>TRES 3</th>
    </tr>
  </thead>
  <tbody>
    <tr id="1">
      <td>
        <select class="form-control" name="select1">
          <option selected="true" disabled="disabled">Selecione 1º </option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </td>
      <td>
        <select class="form-control" name="select2">
          <option selected="true" disabled="disabled">Selecione 2º </option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </td>
      <td>
        <select class="form-control" name="select3">
          <option selected="true" disabled="disabled">Selecione 3º </option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </td>
    </tr>
    <tr id="2">
      <td>
        <select class="form-control" name="select1">
          <option selected="true" disabled="disabled">Selecione 1º </option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </td>
      <td>
        <select class="form-control" name="select2">
          <option selected="true" disabled="disabled">Selecione 2º </option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </td>
      <td>
        <select class="form-control" name="select3">
          <option selected="true" disabled="disabled">Selecione 3º </option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

That's what the structure of HTML and JS is like. When selecting the three values you would need to subtract the values in this way:

valor_1 - valor_2 - valor_3

And depending on the result, give a class to the row:

(value_1 - value_2 - value_3) = 0 addclass ('Good')
(value_1 - value_2 - value_3) < 0 addclass ('Bad')
(value_1 - value_2 - value_3) > 0 addclass ('Alert')

I hope you can help me.

jquery

asked by Alejandro Muñoz Schumacher 07.07.2017 в 02:25

source

1 answer

Export flat file with special characters in C # Assign values to the select

score 1 · Accepted Answer

What was missing was the functionality to find out if all the select in the row were selected and do the calculation.

Here's the additional JS:

var faltanSeleccion = false;
var valor = 0;
var count = 1;
var allSelects = $("#"+id+' '+"select").each(function(){

    if($(this).val() === null){
        faltanSeleccion = true;
    }
    if(count === 1){
        valor = Number($(this).val());
    } else {
        valor -= Number($(this).val());
    }
    count++;

});

if(!faltanSeleccion){
    if(valor === 0){
        $(this).addClass("Bien");
    } else {
        if(valor < 0){
            $(this).addClass("Mal");
        } else {
            $(this).addClass("Alerta");
        }
    }
}

This code (also available in JSFiddle ) should be what I wanted to do:

$("tr").click(function() {
  id = $(this).attr("id");

  $("#" + id + ' ' + "select").each(function(cSelect) {
    $(this).data('stored-value', $(this).val());
  });

  $("#" + id + ' ' + "select").change(function() {
    var cSelected = $(this).val();
    var cPrevious = $(this).data('stored-value');
    $(this).data('stored-value', cSelected);

    var otherSelects = $("#" + id + ' ' + "select").not(this);

    otherSelects.find('option[value="' + this.value + '"]').removeAttr('disabled');
    otherSelects.find('option[value="' + this.value + '"]').attr('disabled', 'disabled');
  });

  var faltanSeleccion = false;
  var valor = 0;
  var count = 1;
  var allSelects = $("#" + id + ' ' + "select").each(function() {

    if ($(this).val() === null) {
      faltanSeleccion = true;
    }
    if (count === 1) {
      valor = Number($(this).val());
    } else {
      valor -= Number($(this).val());
    }
    count++;

  });

  if (!faltanSeleccion) {
    if (valor === 0) {
      $(this).addClass("Bien");
    } else {
      if (valor < 0) {
        $(this).addClass("Mal");
      } else {
        $(this).addClass("Alerta");
      }
    }
  }
});

.Bien {
  background-color: green;
}

.Mal {
  background-color: red;
}

.Alerta {
  background-color: blue;
}

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

<table id='example-table' class="table table-striped">
  <thead>
    <tr>
      <th>UNO 1</th>
      <th>DOS 2</th>
      <th>TRES 3</th>
    </tr>
  </thead>
  <tbody>
    <tr id="1">
      <td>
        <select class="form-control" name="select1">
          <option selected="true" disabled="disabled">Selecione 1º </option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </td>
      <td>
        <select class="form-control" name="select2">
          <option selected="true" disabled="disabled">Selecione 2º </option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </td>
      <td>
        <select class="form-control" name="select3">
          <option selected="true" disabled="disabled">Selecione 3º </option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </td>
    </tr>
    <tr id="2">
      <td>
        <select class="form-control" name="select1">
          <option selected="true" disabled="disabled">Selecione 1º </option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </td>
      <td>
        <select class="form-control" name="select2">
          <option selected="true" disabled="disabled">Selecione 2º </option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </td>
      <td>
        <select class="form-control" name="select3">
          <option selected="true" disabled="disabled">Selecione 3º </option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>