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

function getNumber(el) {
  return parseFloat(el.textContent);
}

const rows = document.querySelectorAll('tbody tr');
const total = getNumber(document.querySelector('#money'));

rows.forEach(row => {
  const sum = row.querySelector('td:nth-child(2)');
  const tick = row.querySelector('td:nth-child(3)');
    const upcoming = row.querySelector('td:nth-child(3)'); 
  
  
  
  if (getNumber(sum) <= total) {
    row.classList.add('green');
    tick.classList.add('tick');
  }
  
  if (getNumber(sum) > total) {
    row.classList.add('purple');
    upcoming.classList.add('upcoming');
  }
});

table {
  width: 75%;
  top: 0;
}

th {
  background-color: #193d49;
  color: #f1f1f1;
  font-size: 15px;
  padding: 4px;
}

tbody tr {
  background-color: #376282;
}

td {
  color: #fff;
  font-size: 15px;
  padding: 4px;
  text-align: center;
}

#money {
  background-color: gold;
  color: blue;
  font-size: 15px;
  padding: 4px;
  text-align: center;
}

td:nth-of-type(2):before { content: "€"; }

.green {background-color: green; }
.blue {background-color: #003366; color: #fff; }
.purple {background-color: purple;  color: #fff; }

.tick:after { content: '✓'; }
.upcoming:after { content: 'Upcoming...'; }

<table id="table-id">
  <thead>
    <tr>
      <th>A/A</th>
      <th>MONEY</th>
      <th>GOAL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>100</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>200</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>500</td>
      <td></td>
    </tr>
    <tr>
      <td>4</td>
      <td>1000</td>
      <td></td>
    </tr>
     <tr>
      <td>5</td>
      <td>5000</td>
      <td></td>
    </tr>
  </tbody>
</table>

<h3>Total €<span id="money">200</span></h3>

当我实现了一个金钱目标时，相应的行是绿色的，并带有一个复选标记。
这肯定是手动完成的。例如，如果我在table上写100，100的目标就完成了。
1.我想要的是，如果我写例如98，在目标栏中写“Remain €2 to complete”。
每个目标都应该这样，200，500，1000，5000。如果我写420 =>“Remain €80 to complete”
1.此外，在确切的下一个细胞的目标尚未完成，我希望它有蓝色的颜色，而不是在即将到来的细胞（照片）的颜色。
是否可能;

function getNumber(el) {
  return parseFloat(el.textContent);
}

const rows = document.querySelectorAll('tbody tr');
const total = getNumber(document.querySelector('#money'));

rows.forEach(row => {
  const sum = row.querySelector('td:nth-child(2)');
  const tick = row.querySelector('td:nth-child(3)');
    const upcoming = row.querySelector('td:nth-child(3)'); 
  
  
  
  if (getNumber(sum) <= total) {
    row.classList.add('green');
    tick.classList.add('tick');
  }
  
  if (getNumber(sum) > total) {
    row.classList.add('purple');
    upcoming.classList.add('upcoming');
  }
});

table {
  width: 75%;
  top: 0;
}

th {
  background-color: #193d49;
  color: #f1f1f1;
  font-size: 15px;
  padding: 4px;
}

tbody tr {
  background-color: #376282;
}

td {
  color: #fff;
  font-size: 15px;
  padding: 4px;
  text-align: center;
}

#money {
  background-color: gold;
  color: blue;
  font-size: 15px;
  padding: 4px;
  text-align: center;
}

td:nth-of-type(2):before { content: "€"; }

.green {background-color: green; }
.blue {background-color: #003366; color: #fff; }
.purple {background-color: purple;  color: #fff; }

.tick:after { content: '✓'; }
.upcoming:after { content: 'Upcoming...'; }

<table id="table-id">
  <thead>
    <tr>
      <th>A/A</th>
      <th>MONEY</th>
      <th>GOAL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>100</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>200</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>500</td>
      <td></td>
    </tr>
    <tr>
      <td>4</td>
      <td>1000</td>
      <td></td>
    </tr>
     <tr>
      <td>5</td>
      <td>5000</td>
      <td></td>
    </tr>
  </tbody>
</table>

<h3>Total €<span id="money">200</span></h3>

当Money列大于总数时，使用变量指示这是否是第一行，如下所示。如果是，则显示剩余金额，而不是复选框。

function getNumber(el) {
  return parseFloat(el.textContent);
}

const rows = document.querySelectorAll('tbody tr');
const total = getNumber(document.querySelector('#money'));
let firstRemaining = true;

rows.forEach(row => {
  const sum = row.querySelector('td:nth-child(2)');
  const tick = row.querySelector('td:nth-child(3)');
  const upcoming = row.querySelector('td:nth-child(3)');
  const amount = getNumber(sum);

  if (amount <= total) {
    row.classList.add('green');
    tick.classList.add('tick');
  } else if (firstRemaining) {
    tick.innerText = `Remain €${amount-total} to Complete`;
    row.classList.add("blue");
    firstRemaining = false;
  } else  {
    row.classList.add('purple');
    upcoming.classList.add('upcoming');
  }
});

table {
  width: 75%;
  top: 0;
}

th {
  background-color: #193d49;
  color: #f1f1f1;
  font-size: 15px;
  padding: 4px;
}

tbody tr {
  background-color: #376282;
}

td {
  color: #fff;
  font-size: 15px;
  padding: 4px;
  text-align: center;
}

#money {
  background-color: gold;
  color: blue;
  font-size: 15px;
  padding: 4px;
  text-align: center;
}

td:nth-of-type(2):before {
  content: "€";
}

.green {
  background-color: green;
}

.blue {
  background-color: #003366;
  color: #fff;
}

.purple {
  background-color: purple;
  color: #fff;
}

.tick:after {
  content: '✓';
}

.upcoming:after {
  content: 'Upcoming...';
}

<table id="table-id">
  <thead>
    <tr>
      <th>A/A</th>
      <th>MONEY</th>
      <th>GOAL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>100</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>200</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>500</td>
      <td></td>
    </tr>
    <tr>
      <td>4</td>
      <td>1000</td>
      <td></td>
    </tr>
    <tr>
      <td>5</td>
      <td>5000</td>
      <td></td>
    </tr>
  </tbody>
</table>

<h3>Total €<span id="money">200</span></h3>

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

1条答案

相关问题

热门标签

最新问答