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

<table >
                <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" >
                        <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"  onclick="setColor('#e47911')">Change</a>
                            </td>     

}
#button1{
    background-color: #e47911;
}

function setColor(color){ 
    
    document.getElementById("vatek").style.backgroundColor=color;
};

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 .

CodePudding user response：

You could do something like this:

<table >
  <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" >
      <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"   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>

CodePudding user response：

You can do it like this, using vanilla js

      <table >
      <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" >
            <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" >Change</a>
            </td>
         </tr>
         <tr >
            <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" >Change</a>
            </td>
         </tr>
         <tr >
            <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" >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>