文章/答案/技术大牛

发布

社区首页 >问答首页 >如何根据td的值来做一个改变背景颜色的按钮？

问如何根据td的值来做一个改变背景颜色的按钮？
EN

Stack Overflow用户

提问于 2022-06-15 16:09:39

回答 2查看 54关注 0票数 1

如何根据td的值更改行的背景色的按钮。因此，如果我的值> 1000，则单击按钮后的背景色必须更改。

所以现在我有我的桌子了

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>

现在，当我点击我的按钮功能，只改变我的背景色，现在我想改变，如果值从Wartosc Netto > 1000，我的背景色必须改变行。

javascript

php

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-06-15 23:12:09

你可以这样做，用香草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>

票数 1

Stack Overflow用户

发布于 2022-06-15 18:19:30

你可以这样做：

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

显然，应该为此包括Jquery库，例如使用上一个小型化版本的cdn：

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72634579

复制

相似问题

问如何根据td的值来做一个改变背景颜色的按钮？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何根据td的值来做一个改变背景颜色的按钮？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何根据td的值来做一个改变背景颜色的按钮？
EN