如果里面的值大于 1000，则在 table 中设置特定行的颜色

Question

所以就像标题中一样，如果里面的值高于 1000，我想单击按钮将行设置为绿色我想我想出了设置颜色的部分我不确定这里的按钮部分是代码的特定部分也是 jsfiddle

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

$(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);


    });
  })


});



$('.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 class="tabela">
  <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 class="ilosc">2</td>
    <td>
      <form name="Vat">
        <select class="obliczvat"></select>
      </form>
    </td>
    <td class="brutto">2000zł</td>
    <td class="netto"></td>
    <td class="bruttow"></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Modernizjacja sprzętu komputerowego</td>
    <td class="ilosc">8</td>
    <td>
      <form name="Vat">
        <select class="obliczvat"></select>
      </form>
    </td>
    <td class="brutto">120zł</td>
    <td class="netto"></td>
    <td class="bruttow"></td>
  </tr>
  <tr>
    <td>3</td>
    <td>modernizacja biura</td>
    <td class="ilosc">4</td>
    <td>
      <form name="Vat">
        <select class="obliczvat"></select>
      </form>
    </td>
    <td class="brutto">5007zł</td>
    <td class="netto"></td>
    <td class="bruttow"></td>
  </tr>
  <tr>
    <td>4</td>
    <td>Paliwo</td>
    <td class="ilosc">7</td>
    <td>
      <form name="Vat">
        <select class="obliczvat"></select>
      </form>
    </td>
    <td class="brutto">359zł</td>
    <td class="netto"></td>
    <td class="bruttow"></td>
  </tr>
  <tr>
    <td>5</td>
    <td>Zakup nowego Samochódu do floty</td>
    <td class="ilosc">1</td>
    <td>
      <form name="Vat">
        <select class="obliczvat"></select>
      </form>
    </td>
    <td class="brutto">23755zł</td>
    <td class="netto"></td>
    <td class="bruttow"></td>
  </tr>
</table>

<button type="button" name="green" onclick="makeGreen()">button</button>

https://jsfiddle.net/ramfwt31/

Answer 1

您基本上已经做到了，但是内联 onclick 将其关闭，所以我添加了一个 jquery click 和一个 id 按钮，以便在单击按钮时调用该函数

$(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 class="tabela">
  <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 class="ilosc">2</td>
    <td>
      <form name="Vat">
        <select class="obliczvat"></select>
      </form>
    </td>
    <td class="brutto">2000zł</td>
    <td class="netto"></td>
    <td class="bruttow"></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Modernizjacja sprzętu komputerowego</td>
    <td class="ilosc">8</td>
    <td>
      <form name="Vat">
        <select class="obliczvat"></select>
      </form>
    </td>
    <td class="brutto">120zł</td>
    <td class="netto"></td>
    <td class="bruttow"></td>
  </tr>
  <tr>
    <td>3</td>
    <td>modernizacja biura</td>
    <td class="ilosc">4</td>
    <td>
      <form name="Vat">
        <select class="obliczvat"></select>
      </form>
    </td>
    <td class="brutto">5007zł</td>
    <td class="netto"></td>
    <td class="bruttow"></td>
  </tr>
  <tr>
    <td>4</td>
    <td>Paliwo</td>
    <td class="ilosc">7</td>
    <td>
      <form name="Vat">
        <select class="obliczvat"></select>
      </form>
    </td>
    <td class="brutto">359zł</td>
    <td class="netto"></td>
    <td class="bruttow"></td>
  </tr>
  <tr>
    <td>5</td>
    <td>Zakup nowego Samochódu do floty</td>
    <td class="ilosc">1</td>
    <td>
      <form name="Vat">
        <select class="obliczvat"></select>
      </form>
    </td>
    <td class="brutto">23755zł</td>
    <td class="netto"></td>
    <td class="bruttow"></td>
  </tr>
</table>

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

如果里面的值大于 1000，则在 table 中设置特定行的颜色

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

html

javascript

jquery