表格单元格条件格式

Question

你好，

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

我的目的是改变：

• 如果单元格值 >3或<-3，则任何单元格背景颜色为红色
• 如果单元格值 <1且>-1，则任何单元格背景颜色为绿色
• Rest 的单元格背景颜色应为黄色。

请运行代码片段以获取完整的详细信息。

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

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

Answer 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"); } }

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