根据数值，找到下一个单元格的总数并着色。

huangapple
go评论102阅读模式
英文:

Depending on the numerical value, find the total number of the next cell and color it

问题

以下是您要翻译的代码部分：

  1. function getNumber(el) {
  2.   return parseFloat(el.textContent);
  3. }
  5. const rows = document.querySelectorAll('tbody tr');
  6. const total = getNumber(document.querySelector('#money'));
  8. rows.forEach(row => {
  9.   const sum = row.querySelector('td:nth-child(2)');
  10.   const tick = row.querySelector('td:nth-child(3)');
  11.  	const upcoming = row.querySelector('td:nth-child(3)'); 
  12.   
  13.   if (getNumber(sum) <= total) {
  14.     row.classList.add('green');
  15.     tick.classList.add('tick');
  16.   }
  17.   
  18.   if (getNumber(sum) > total) {
  19.     row.classList.add('purple');
  20.     upcoming.classList.add('upcoming');
  21.   }
  22. });
  1. table {
  2.   width: 75%;
  3.   top: 0;
  4. }
  6. th {
  7.   background-color: #193d49;
  8.   color: #f1f1f1;
  9.   font-size: 15px;
  10.   padding: 4px;
  11. }
  13. tbody tr {
  14.   background-color: #376282;
  15. }
  17. td {
  18.   color: #fff;
  19.   font-size: 15px;
  20.   padding: 4px;
  21.   text-align: center;
  22. }
  24. #money {
  25.   background-color: gold;
  26.   color: blue;
  27.   font-size: 15px;
  28.   padding: 4px;
  29.   text-align: center;
  30. }
  32. td:nth-of-type(2):before { content: "€"; }
  34. .green {background-color: green; }
  35. .blue {background-color: #003366; color: #fff; }
  36. .purple {background-color: purple;	color: #fff; }
  38. .tick:after { content: '✓'; }
  39. .upcoming:after { content: 'Upcoming...'; }
  1. <table id="table-id">
  2.   <thead>
  3.     <tr>
  4.       <th>A/A</th>
  5.       <th>MONEY</th>
  6.       <th>GOAL</th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td>1</td>
  12.       <td>100</td>
  13.       <td></td>
  14.     </tr>
  15.     <tr>
  16.       <td>2</td>
  17.       <td>200</td>
  18.       <td></td>
  19.     </tr>
  20.     <tr>
  21.       <td>3</td>
  22.       <td>500</td>
  23.       <td></td>
  24.     </tr>
  25.     <tr>
  26.       <td>4</td>
  27.       <td>1000</td>
  28.       <td></td>
  29.     </tr>
  30.      <tr>
  31.       <td>5</td>
  32.       <td>5000</td>
  33.       <td></td>
  34.     </tr>
  35.   </tbody>
  36. </table>
  38. <h3>Total €<span id="money">200</span></h3>
英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function getNumber(el) {
  2.   return parseFloat(el.textContent);
  3. }
  5. const rows = document.querySelectorAll(&#39;tbody tr&#39;);
  6. const total = getNumber(document.querySelector(&#39;#money&#39;));
  8. rows.forEach(row =&gt; {
  9.   const sum = row.querySelector(&#39;td:nth-child(2)&#39;);
  10.   const tick = row.querySelector(&#39;td:nth-child(3)&#39;);
  11.     const upcoming = row.querySelector(&#39;td:nth-child(3)&#39;); 
  12.   
  13.   
  14.   
  15.   if (getNumber(sum) &lt;= total) {
  16.     row.classList.add(&#39;green&#39;);
  17.     tick.classList.add(&#39;tick&#39;);
  18.   }
  19.   
  20.   if (getNumber(sum) &gt; total) {
  21.     row.classList.add(&#39;purple&#39;);
  22.     upcoming.classList.add(&#39;upcoming&#39;);
  23.   }
  24. });

<!-- language: lang-css -->

  1. table {
  2.   width: 75%;
  3.   top: 0;
  4. }
  6. th {
  7.   background-color: #193d49;
  8.   color: #f1f1f1;
  9.   font-size: 15px;
  10.   padding: 4px;
  11. }
  13. tbody tr {
  14.   background-color: #376282;
  15. }
  17. td {
  18.   color: #fff;
  19.   font-size: 15px;
  20.   padding: 4px;
  21.   text-align: center;
  22. }
  24. #money {
  25.   background-color: gold;
  26.   color: blue;
  27.   font-size: 15px;
  28.   padding: 4px;
  29.   text-align: center;
  30. }
  32. td:nth-of-type(2):before { content: &quot;€&quot;; }
  35. .green {background-color: green; }
  36. .blue {background-color: #003366; color: #fff; }
  37. .purple {background-color: purple;  color: #fff; }
  39. .tick:after { content: &#39;✓&#39;; }
  40. .upcoming:after { content: &#39;Upcoming...&#39;; }

<!-- language: lang-html -->

  1. &lt;table id=&quot;table-id&quot;&gt;
  2.   &lt;thead&gt;
  3.     &lt;tr&gt;
  4.       &lt;th&gt;A/A&lt;/th&gt;
  5.       &lt;th&gt;MONEY&lt;/th&gt;
  6.       &lt;th&gt;GOAL&lt;/th&gt;
  7.     &lt;/tr&gt;
  8.   &lt;/thead&gt;
  9.   &lt;tbody&gt;
  10.     &lt;tr&gt;
  11.       &lt;td&gt;1&lt;/td&gt;
  12.       &lt;td&gt;100&lt;/td&gt;
  13.       &lt;td&gt;&lt;/td&gt;
  14.     &lt;/tr&gt;
  15.     &lt;tr&gt;
  16.       &lt;td&gt;2&lt;/td&gt;
  17.       &lt;td&gt;200&lt;/td&gt;
  18.       &lt;td&gt;&lt;/td&gt;
  19.     &lt;/tr&gt;
  20.     &lt;tr&gt;
  21.       &lt;td&gt;3&lt;/td&gt;
  22.       &lt;td&gt;500&lt;/td&gt;
  23.       &lt;td&gt;&lt;/td&gt;
  24.     &lt;/tr&gt;
  25.     &lt;tr&gt;
  26.       &lt;td&gt;4&lt;/td&gt;
  27.       &lt;td&gt;1000&lt;/td&gt;
  28.       &lt;td&gt;&lt;/td&gt;
  29.     &lt;/tr&gt;
  30.      &lt;tr&gt;
  31.       &lt;td&gt;5&lt;/td&gt;
  32.       &lt;td&gt;5000&lt;/td&gt;
  33.       &lt;td&gt;&lt;/td&gt;
  34.     &lt;/tr&gt;
  35.   &lt;/tbody&gt;
  36. &lt;/table&gt;
  38. &lt;h3&gt;Total €&lt;span id=&quot;money&quot;&gt;200&lt;/span&gt;&lt;/h3&gt;

<!-- end snippet -->

When I achieve a money goal, the corresponding rows is colored green with a check symbol.

This is definitely done manually. For example if I write 100 on the table, the 100 goal is completed.

  1. What I want is, if I write for example 98, to write in the goal column "Remain €2 to complete".

And this should happen for every goal, 200, 500, 1000, 5000. If I write 420 =&gt; "Remain €80 to complete"

  1. Also, in the exact next cells where the target has not been completed yet, I want it to have the blue color and not the colors that are in the upcoming cells (photo).

Is it possible;

根据数值，找到下一个单元格的总数并着色。

  1. function getNumber(el) {
  2.   return parseFloat(el.textContent);
  3. }
  5. const rows = document.querySelectorAll(&#39;tbody tr&#39;);
  6. const total = getNumber(document.querySelector(&#39;#money&#39;));
  8. rows.forEach(row =&gt; {
  9.   const sum = row.querySelector(&#39;td:nth-child(2)&#39;);
  10.   const tick = row.querySelector(&#39;td:nth-child(3)&#39;);
  11.  	const upcoming = row.querySelector(&#39;td:nth-child(3)&#39;); 
  12.   
  13.   
  14.   
  15.   if (getNumber(sum) &lt;= total) {
  16.     row.classList.add(&#39;green&#39;);
  17.     tick.classList.add(&#39;tick&#39;);
  18.   }
  19.   
  20.   if (getNumber(sum) &gt; total) {
  21.     row.classList.add(&#39;purple&#39;);
  22.     upcoming.classList.add(&#39;upcoming&#39;);
  23.   }
  24. });
  26. table {
  27.   width: 75%;
  28.   top: 0;
  29. }
  31. th {
  32.   background-color: #193d49;
  33.   color: #f1f1f1;
  34.   font-size: 15px;
  35.   padding: 4px;
  36. }
  38. tbody tr {
  39.   background-color: #376282;
  40. }
  42. td {
  43.   color: #fff;
  44.   font-size: 15px;
  45.   padding: 4px;
  46.   text-align: center;
  47. }
  49. #money {
  50.   background-color: gold;
  51.   color: blue;
  52.   font-size: 15px;
  53.   padding: 4px;
  54.   text-align: center;
  55. }
  57. td:nth-of-type(2):before { content: &quot;€&quot;; }
  60. .green {background-color: green; }
  61. .blue {background-color: #003366; color: #fff; }
  62. .purple {background-color: purple;	color: #fff; }
  64. .tick:after { content: &#39;✓&#39;; }
  65. .upcoming:after { content: &#39;Upcoming...&#39;; }
  68. &lt;table id=&quot;table-id&quot;&gt;
  69.   &lt;thead&gt;
  70.     &lt;tr&gt;
  71.       &lt;th&gt;A/A&lt;/th&gt;
  72.       &lt;th&gt;MONEY&lt;/th&gt;
  73.       &lt;th&gt;GOAL&lt;/th&gt;
  74.     &lt;/tr&gt;
  75.   &lt;/thead&gt;
  76.   &lt;tbody&gt;
  77.     &lt;tr&gt;
  78.       &lt;td&gt;1&lt;/td&gt;
  79.       &lt;td&gt;100&lt;/td&gt;
  80.       &lt;td&gt;&lt;/td&gt;
  81.     &lt;/tr&gt;
  82.     &lt;tr&gt;
  83.       &lt;td&gt;2&lt;/td&gt;
  84.       &lt;td&gt;200&lt;/td&gt;
  85.       &lt;td&gt;&lt;/td&gt;
  86.     &lt;/tr&gt;
  87.     &lt;tr&gt;
  88.       &lt;td&gt;3&lt;/td&gt;
  89.       &lt;td&gt;500&lt;/td&gt;
  90.       &lt;td&gt;&lt;/td&gt;
  91.     &lt;/tr&gt;
  92.     &lt;tr&gt;
  93.       &lt;td&gt;4&lt;/td&gt;
  94.       &lt;td&gt;1000&lt;/td&gt;
  95.       &lt;td&gt;&lt;/td&gt;
  96.     &lt;/tr&gt;
  97.      &lt;tr&gt;
  98.       &lt;td&gt;5&lt;/td&gt;
  99.       &lt;td&gt;5000&lt;/td&gt;
  100.       &lt;td&gt;&lt;/td&gt;
  101.     &lt;/tr&gt;
  102.   &lt;/tbody&gt;
  103. &lt;/table&gt;
  106. &lt;h3&gt;Total €&lt;span id=&quot;money&quot;&gt;200&lt;/span&gt;&lt;/h3&gt;

答案1

得分: 0

"When the Money column is more than the total, use a variable to indicate whether this is the first row like this. If it is, display the remaining amount instead of the checkbox."

  1. function getNumber(el) {
  2.   return parseFloat(el.textContent);
  3. }
  5. const rows = document.querySelectorAll('tbody tr');
  6. const total = getNumber(document.querySelector('#money'));
  7. let firstRemaining = true;
  9. rows.forEach(row => {
  10.   const sum = row.querySelector('td:nth-child(2)');
  11.   const tick = row.querySelector('td:nth-child(3)');
  12.   const upcoming = row.querySelector('td:nth-child(3)');
  13.   const amount = getNumber(sum);
  15.   if (amount <= total) {
  16.     row.classList.add('green');
  17.     tick.classList.add('tick');
  18.   } else if (firstRemaining) {
  19.     tick.innerText = `Remain €${amount-total} to Complete`;
  20.     row.classList.add("blue");
  21.     firstRemaining = false;
  22.   } else  {
  23.     row.classList.add('purple');
  24.     upcoming.classList.add('upcoming');
  25.   }
  26. });

I've provided the JavaScript code translation as requested.

英文:

When the Money column is more than the total, use a variable to indicate whether this is the first row like this. If it is, display the remaining amount instead of the checkbox.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function getNumber(el) {
  2.   return parseFloat(el.textContent);
  3. }
  5. const rows = document.querySelectorAll(&#39;tbody tr&#39;);
  6. const total = getNumber(document.querySelector(&#39;#money&#39;));
  7. let firstRemaining = true;
  9. rows.forEach(row =&gt; {
  10.   const sum = row.querySelector(&#39;td:nth-child(2)&#39;);
  11.   const tick = row.querySelector(&#39;td:nth-child(3)&#39;);
  12.   const upcoming = row.querySelector(&#39;td:nth-child(3)&#39;);
  13.   const amount = getNumber(sum);
  15.   if (amount &lt;= total) {
  16.     row.classList.add(&#39;green&#39;);
  17.     tick.classList.add(&#39;tick&#39;);
  18.   } else if (firstRemaining) {
  19.     tick.innerText = `Remain €${amount-total} to Complete`;
  20.     row.classList.add(&quot;blue&quot;);
  21.     firstRemaining = false;
  22.   } else  {
  23.     row.classList.add(&#39;purple&#39;);
  24.     upcoming.classList.add(&#39;upcoming&#39;);
  25.   }
  26. });

<!-- language: lang-css -->

  1. table {
  2.   width: 75%;
  3.   top: 0;
  4. }
  6. th {
  7.   background-color: #193d49;
  8.   color: #f1f1f1;
  9.   font-size: 15px;
  10.   padding: 4px;
  11. }
  13. tbody tr {
  14.   background-color: #376282;
  15. }
  17. td {
  18.   color: #fff;
  19.   font-size: 15px;
  20.   padding: 4px;
  21.   text-align: center;
  22. }
  24. #money {
  25.   background-color: gold;
  26.   color: blue;
  27.   font-size: 15px;
  28.   padding: 4px;
  29.   text-align: center;
  30. }
  32. td:nth-of-type(2):before {
  33.   content: &quot;€&quot;;
  34. }
  36. .green {
  37.   background-color: green;
  38. }
  40. .blue {
  41.   background-color: #003366;
  42.   color: #fff;
  43. }
  45. .purple {
  46.   background-color: purple;
  47.   color: #fff;
  48. }
  50. .tick:after {
  51.   content: &#39;✓&#39;;
  52. }
  54. .upcoming:after {
  55.   content: &#39;Upcoming...&#39;;
  56. }

<!-- language: lang-html -->

  1. &lt;table id=&quot;table-id&quot;&gt;
  2.   &lt;thead&gt;
  3.     &lt;tr&gt;
  4.       &lt;th&gt;A/A&lt;/th&gt;
  5.       &lt;th&gt;MONEY&lt;/th&gt;
  6.       &lt;th&gt;GOAL&lt;/th&gt;
  7.     &lt;/tr&gt;
  8.   &lt;/thead&gt;
  9.   &lt;tbody&gt;
  10.     &lt;tr&gt;
  11.       &lt;td&gt;1&lt;/td&gt;
  12.       &lt;td&gt;100&lt;/td&gt;
  13.       &lt;td&gt;&lt;/td&gt;
  14.     &lt;/tr&gt;
  15.     &lt;tr&gt;
  16.       &lt;td&gt;2&lt;/td&gt;
  17.       &lt;td&gt;200&lt;/td&gt;
  18.       &lt;td&gt;&lt;/td&gt;
  19.     &lt;/tr&gt;
  20.     &lt;tr&gt;
  21.       &lt;td&gt;3&lt;/td&gt;
  22.       &lt;td&gt;500&lt;/td&gt;
  23.       &lt;td&gt;&lt;/td&gt;
  24.     &lt;/tr&gt;
  25.     &lt;tr&gt;
  26.       &lt;td&gt;4&lt;/td&gt;
  27.       &lt;td&gt;1000&lt;/td&gt;
  28.       &lt;td&gt;&lt;/td&gt;
  29.     &lt;/tr&gt;
  30.      &lt;tr&gt;
  31.       &lt;td&gt;5&lt;/td&gt;
  32.       &lt;td&gt;5000&lt;/td&gt;
  33.       &lt;td&gt;&lt;/td&gt;
  34.     &lt;/tr&gt;
  35.   &lt;/tbody&gt;
  36. &lt;/table&gt;
  38. &lt;h3&gt;Total €&lt;span id=&quot;money&quot;&gt;200&lt;/span&gt;&lt;/h3&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月18日 18:39:31
  • 转载请务必保留本文链接：https://go.coder-hub.com/76500111.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定