Setting color of specific row in table if the value inside is >1000-CodePudding

So like in the title i want to click the button set row to green if value inside is higher than 1000 i think i figured out the part with setting color im not sure about the button part here is the specific part of code also the jsfiddle

$('.netto').filter(function makeGreen () {
    return parseInt($.trim($(this).text()), 10) > 1000
}).closest('td').css('background-color', '#24AD36');

https://jsfiddle.net/ramfwt31/

CodePudding user response：

You basically had it, but the inline onclick was throwing it off so I added a jquery click and an id for your button so the function is called when the button is clicked

$(function() {
  var vat = [{
      display: "ZW",
      value: "0",
    },
    {
      display: "NP",
      value: "0",
    },
    {
      display: "0%",
      value: "0",
    },
    {
      display: "3%",
      value: "3",
    },
    {
      display: "8%",
      value: "8",
    },
    {
      display: "23%",
      value: "23",
    },
  ];

  var options = ['<option value="">Wybierz VAT</option>'];

  for (var i = 0; i < vat.length; i  ) {
    options.push('<option value="');
    options.push(vat[i].value);
    options.push('">');
    options.push(vat[i].display);
    options.push("</option>");
  }

  $(".obliczvat")
    .html(options.join(""))
    .change(function() {
      var val = $(this).val();
      if (val == 0) {
        var ilosc = parseInt($(this).closest("td").prev().text(), 10);
        var brutto = parseInt($(this).closest("td").next().text(), 10);

        var ob = brutto * ilosc;
        $(this).closest("td").next().next().text(ob);
      }
      if (val == 3) {
        var ilosc = parseInt($(this).closest("td").prev().text(), 10);
        var brutto = parseInt($(this).closest("td").next().text(), 10);

        var ob = (brutto * ilosc) - brutto * ilosc * 0.03;

        $(this).closest("td").next().next().text(ob);
      }
      if (val == 8) {
        var ilosc = parseInt($(this).closest("td").prev().text(), 10);
        var brutto = parseInt($(this).closest("td").next().text(), 10);

        var ob = (brutto * ilosc) - brutto * ilosc * 0.08;

        $(this).closest("td").next().next().text(ob);
      }
      if (val == 23) {
        var ilosc = parseInt($(this).closest("td").prev().text(), 10);
        var brutto = parseInt($(this).closest("td").next().text(), 10);

        var ob = (brutto * ilosc) - brutto * ilosc * 0.23;

        $(this).closest("td").next().next().text(ob);
      }
    });
  $(function() {

    $('.tabela tbody tr').each(function() {
      var bruttoW = $('.bruttow', this).text();

      var ilosc = parseInt($('.ilosc', this).text(), 10);
      var brutto = parseInt($('.brutto', this).text(), 10);


      var ob = (brutto * ilosc);
      $('.bruttow', this).text(ob);


    });
  })


});

$('#green').on('click', function(event) {
  $('.netto').filter(function makeGreen() {
    return parseInt($.trim($(this).text()), 10) > 1000;
  }).closest('td').css('background-color', '#24AD36');
});

body {
  background: #34568B;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table >
  <tr>
    <th>Lp.</th>
    <th>Opis</th>
    <th>Ilość</th>
    <th>VAT</th>
    <th>Kwota Brutto</th>
    <th>Wartość Netto</th>
    <th>Wartość Brutto</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Palety</td>
    <td >2</td>
    <td>
      <form name="Vat">
        <select ></select>
      </form>
    </td>
    <td >2000zł</td>
    <td ></td>
    <td ></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Modernizjacja sprzętu komputerowego</td>
    <td >8</td>
    <td>
      <form name="Vat">
        <select ></select>
      </form>
    </td>
    <td >120zł</td>
    <td ></td>
    <td ></td>
  </tr>
  <tr>
    <td>3</td>
    <td>modernizacja biura</td>
    <td >4</td>
    <td>
      <form name="Vat">
        <select ></select>
      </form>
    </td>
    <td >5007zł</td>
    <td ></td>
    <td ></td>
  </tr>
  <tr>
    <td>4</td>
    <td>Paliwo</td>
    <td >7</td>
    <td>
      <form name="Vat">
        <select ></select>
      </form>
    </td>
    <td >359zł</td>
    <td ></td>
    <td ></td>
  </tr>
  <tr>
    <td>5</td>
    <td>Zakup nowego Samochódu do floty</td>
    <td >1</td>
    <td>
      <form name="Vat">
        <select ></select>
      </form>
    </td>
    <td >23755zł</td>
    <td ></td>
    <td ></td>
  </tr>
</table>

<button type="button" id="green" name="green">button</button>