【问题标题】：Table cells conditional formatting表格单元格条件格式
【发布时间】：2019-10-10 11:32:45
【问题描述】：

您好，

我正在尝试根据多个条件格式化所有数字表格单元格。

我的目的是改变：

如果单元格值 >3 或，则任何单元格背景颜色为红色
如果单元格值和 >-1
其余单元格的背景颜色应为黄色。

请运行 sn-p 以获取完整详细信息。

================================================ ==================================================

p.a {
        white-space: nowrap;
    }
    h2 {
        text-align: center;
        font-family: Helvetica, Arial, sans-serif;
    }
    table {
        margin-left: auto;
        margin-right: auto;
    }
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th, td {
        padding: 5px;
        text-align: left;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 90%;
        white-space:nowrap;
    }
    table tbody tr:hover {
        background-color: #dddddd;
    }
    .wide {
        width: 90%;
    }

   <h2> Title here </h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"><table border="1" class="dataframe wide" id="myTable">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>KEY</th>
      <th>DEVREVSTEP</th>
      <th>WW32</th>
      <th>WW33</th>
      <th>WW34</th>
      <th>WW35</th>
      <th>WW36</th>
      <th>WW37</th>
      <th>WW38</th>
      <th>WW39</th>
      <th>WW40</th>
      <th>Rule</th>
      <th>LINK</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>First</td>
      <td>A</td>
      <td>-0.64</td>
      <td>6.47</td>
      <td>23.14</td>
      <td>3.51</td>
      <td>0.13</td>
      <td>-0.41</td>
      <td>-0.59</td>
      <td>-0.31</td>
      <td>33.13</td>
      <td>A</td>
      <td>Google.com</td>
    </tr>
    <tr>
      <th>1</th>
      <td>Second</td>
      <td>B</td>
      <td>-18.04</td>
      <td>-18.42</td>
      <td>-17.44</td>
      <td>-16.35</td>
      <td>-19.06</td>
      <td>-17.49</td>
      <td>-18.62</td>
      <td>-17.92</td>
      <td>-18.23</td>
      <td>C</td>
      <td>Amazon.com</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Third</td>
      <td>C</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>-0.59</td>
      <td>2.25</td>
      <td>-0.33</td>
      <td>0.55</td>
      <td>-0.53</td>
      <td>8.96</td>
      <td>17.53</td>
      <td>B</td>
      <td>Ebay.com</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Fourth</td>
      <td>A</td>
      <td>-0.18</td>
      <td>3.25</td>
      <td>7.63</td>
      <td>1.90</td>
      <td>-0.19</td>
      <td>0.41</td>
      <td>0.15</td>
      <td>0.20</td>
      <td>17.31</td>
      <td>A</td>
      <td>Yahoo.com</td>
    </tr>
    <tr>
      <th>4</th>
      <td>MT6@DCCD@NEST@X-BAR</td>
      <td>A</td>
      <td>0.24</td>
      <td>-3.25</td>
      <td>-6.42</td>
      <td>-1.51</td>
      <td>0.60</td>
      <td>-0.01</td>
      <td>0.25</td>
      <td>-0.02</td>
      <td>-15.13</td>
      <td>A</td>
      <td>MSN.com</td>
    </tr>
    <tr>
      <th>5</th>
      <td>First</td>
      <td>D</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>5.06</td>
      <td>NaN</td>
      <td>1.27</td>
      <td>-0.56</td>
      <td>13.24</td>
      <td>A</td>
      <td>Google.com</td>
    </tr>
    
   
    
  </tbody>
</table>

【问题讨论】：

请添加您尝试向您提问的javascript。

标签： javascript

【解决方案1】：

var tds = document.querySelectorAll('tbody td'), i;
for(i = 0; i < tds.length; ++i) {
  if(tds[i].textContent > 3 || tds[i].textContent < -3){
    tds[i].classList.add("bgred");
  }else if (tds[i].textContent < 1 || tds[i].textContent < -1){
    tds[i].classList.add("bggreen");
  }else {
    tds[i].classList.add("bgyellow");
  }
}

p.a {
        white-space: nowrap;
    }
    h2 {
        text-align: center;
        font-family: Helvetica, Arial, sans-serif;
    }
    table {
        margin-left: auto;
        margin-right: auto;
    }
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th, td {
        padding: 5px;
        text-align: left;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 90%;
        white-space:nowrap;
    }
    table tbody tr:hover {
        background-color: #dddddd;
    }
    .wide {
        width: 90%;
    }
    .bgred{
    background-color: red; 
  }
  .bggreen{
    background-color: green; 
  }
  .bgyellow{
    background-color: yellow; 
  }

 <h2> Title here </h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"><table border="1" class="dataframe wide" id="myTable">
  <table>
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>KEY</th>
      <th>DEVREVSTEP</th>
      <th>WW32</th>
      <th>WW33</th>
      <th>WW34</th>
      <th>WW35</th>
      <th>WW36</th>
      <th>WW37</th>
      <th>WW38</th>
      <th>WW39</th>
      <th>WW40</th>
      <th>Rule</th>
      <th>LINK</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>First</td>
      <td>A</td>
      <td>-0.64</td>
      <td>6.47</td>
      <td>23.14</td>
      <td>3.51</td>
      <td>0.13</td>
      <td>-0.41</td>
      <td>-0.59</td>
      <td>-0.31</td>
      <td>33.13</td>
      <td>A</td>
      <td>Google.com</td>
    </tr>
    <tr>
      <th>1</th>
      <td>Second</td>
      <td>B</td>
      <td>-18.04</td>
      <td>-18.42</td>
      <td>-17.44</td>
      <td>-16.35</td>
      <td>-19.06</td>
      <td>-17.49</td>
      <td>-18.62</td>
      <td>-17.92</td>
      <td>-18.23</td>
      <td>C</td>
      <td>Amazon.com</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Third</td>
      <td>C</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>-0.59</td>
      <td>2.25</td>
      <td>-0.33</td>
      <td>0.55</td>
      <td>-0.53</td>
      <td>8.96</td>
      <td>17.53</td>
      <td>B</td>
      <td>Ebay.com</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Fourth</td>
      <td>A</td>
      <td>-0.18</td>
      <td>3.25</td>
      <td>7.63</td>
      <td>1.90</td>
      <td>-0.19</td>
      <td>0.41</td>
      <td>0.15</td>
      <td>0.20</td>
      <td>17.31</td>
      <td>A</td>
      <td>Yahoo.com</td>
    </tr>
    <tr>
      <th>4</th>
      <td>MT6@DCCD@NEST@X-BAR</td>
      <td>A</td>
      <td>0.24</td>
      <td>-3.25</td>
      <td>-6.42</td>
      <td>-1.51</td>
      <td>0.60</td>
      <td>-0.01</td>
      <td>0.25</td>
      <td>-0.02</td>
      <td>-15.13</td>
      <td>A</td>
      <td>MSN.com</td>
    </tr>
    <tr>
      <th>5</th>
      <td>First</td>
      <td>D</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>5.06</td>
      <td>NaN</td>
      <td>1.27</td>
      <td>-0.56</td>
      <td>13.24</td>
      <td>A</td>
      <td>Google.com</td>
    </tr>
  </tbody>
</table>

【讨论】：