如果內部值>1000，則設定表格中特定行的顏色

所以就像在標題中我想單擊按鈕將行設定為綠色如果里面的值高于 1000 我想我想出了設定顏色的部分我不確定按鈕部分這里是代碼的特定部分也是 jsfiddle

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

https://jsfiddle.net/ramfwt31/

uj5u.com熱心網友回復：

你基本上已經有了它，但是行內 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>

標籤：javascript html jQuery

上一篇：BOOST請求發送JSON資料

下一篇：我無法調整iframe高度