How to do a button which change backgrtound color base on value from td?

user_14130443 0
Viewed 51

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 .

css html php javascript
2 Answers

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>
user_19346720

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>

user_96328090
Related