How to do a button which change a background color of row base on the value from td. So if i hava value > 1000 my background color after click button must change
so now i have my table
function setColor(color) {
document.getElementById("vatek").style.backgroundColor = color;
};#button1 {
background-color: #e47911;
}<table class="button-box3">
<thead>
<tr>
<th>vatId</th>
<th>Desc</th>
<th>MPK</th>
<th>Quantity</th>
<th>Vat </th>
<th>Kwota Brutto</th>
<th>Wartosc Netto</th>
<th>Wartosc Brutto</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id="vatek" class="active-row">
<td>1</td>
<td>xx</td>
<td>Stychurski</td>
<td>Manager</td>
<td>21.04.2020</td>
<td>20</td>
<td>2022</td>
<td>20</td>
<td>
<a href="#" type="button" class="submit-btn3" onclick="setColor('#e47911')">Change</a>
</td>now i have when i click my button function only change my background color now i want to change if value from Wartosc Netto is > 1000 my background color of row must change .
You could do something like this:
<table class="button-box3">
<thead>
<tr >
<th>vatId</th>
<th>Desc</th>
<th>MPK</th>
<th>Quantity</th>
<th>Vat </th>
<th>Kwota Brutto</th>
<th>Wartosc Netto</th>
<th>Wartosc Brutto</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id="vatek" class="active-row">
<td>1</td>
<td>xx</td>
<td>Stychurski</td>
<td>Manager</td>
<td>21.04.2020</td>
<td>20</td>
<td id="wartosc-netto-value" data-myvalue="2022">2022</td>
<td>20</td>
<td>
<a href="#" type="button" class="submit-btn3" data-color="#e47911">Change</a>
</td>
</tr>
<tbody>
</table>
<script>
$(function(){
$('.submit-btn3').on('click', function(e){
e.preventDefault();
let tdElement = document.getElementById('wartosc-netto-value');
let wartoscNettoVal = parseInt(tdElement.dataset.myvalue);
if( 1000 < wartoscNettoVal ){
let newColor = this.dataset.color;
setNewColor(newColor);
}
});
function setNewColor( newColor ){
let trElement = document.getElementById('vatek');
trElement.style.backgroundColor = newColor;
}
});
</script>
Obviously, you should include Jquery library for this, for example using a cdn of the last minified version:
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
You can do it like this, using vanilla js
<table class="button-box3">
<thead>
<tr >
<th>vatId</th>
<th>Desc</th>
<th>MPK</th>
<th>Quantity</th>
<th>Vat </th>
<th>Kwota Brutto</th>
<th>Wartosc Netto</th>
<th>Wartosc Brutto</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id="vatek" class="active-row">
<td>1</td>
<td>xx</td>
<td>Stychurski</td>
<td>Manager</td>
<td>21.04.2020</td>
<td>20</td>
<td >2022</td>
<td>20</td>
<td>
<a href="#" type="button" class="submit-btn3">Change</a>
</td>
</tr>
<tr class="row">
<td>1</td>
<td>xx</td>
<td>Stychurski</td>
<td>Manager</td>
<td>21.04.2020</td>
<td>20</td>
<td >100</td>
<td>20</td>
<td>
<a href="#" type="button" class="submit-btn3">Change</a>
</td>
</tr>
<tr class="row">
<td>1</td>
<td>xx</td>
<td>Stychurski</td>
<td>Manager</td>
<td>21.04.2020</td>
<td>20</td>
<td >3000</td>
<td>20</td>
<td>
<a href="#" type="button" class="submit-btn3">Change</a>
</td>
</tr>
</tbody>
</table>
<script>
function setColor(e){
const colors = ['#e47911', 'green'];
const wartoscNetto = e.target.offsetParent.parentNode.children[6].innerText;
const currentTr = e.target.offsetParent.parentNode;
if(wartoscNetto > 1000) return currentTr.style.backgroundColor=colors[0];
currentTr.style.backgroundColor=colors[1];
};
const btn = document.querySelectorAll('.submit-btn3');
btn.forEach(el => el.addEventListener('click', setColor));
</script>