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

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>