Html - Depending on numeric value and text, coloring table background

Anastasia
June 17, 2023
242 views
0 votes
2 Answers

I have a money goal table. What I want is, every time I complete a goal for example 100 dollars,

if I write in total $100.00, "A/A 1" automatically changes to green.

If I write, $200.00, "A/A 1 and 2" to turn green.

Is it possible to be affected by HTML text? Thanks a lot!!!

.table {
  width: 100%;
  top:0; 
}

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

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

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

<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>
  </tbody>
</table>


<h3>Total: 
<span id="money">€100,00</span></h3>

Answers

Form your question I get the point that if you enter value 100 or above 100 then the first column (A/A) should turn green (background color). This can be achieve through adding js.

 Goal();
 
 
   function Goal() {
      var table = document.getElementById("table-id");
      var rows = table.getElementsByTagName("tr");

      var totalMoney = 0;

      for (var i = 1; i < rows.length; i++) {
        var row = rows[i];
        var moneyCell = row.cells[1];
        var goalCell = row.cells[2];

        var money = parseFloat(moneyCell.textContent.replace(/[^0-9.-]+/g, ""));

        if (money >= 100) {
          row.cells[0].style.backgroundColor = "green";
          goalCell.textContent = "✓";
        } else {
          row.cells[0].style.backgroundColor = "";
          goalCell.textContent = "--";
        }

        totalMoney += money;
      }

      document.getElementById("money").textContent =
        "€" + totalMoney.toFixed(2);
    }

 .table {
      width: 100%;
      top: 0;
    }

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

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

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

 <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>&#x2713;</td>
      </tr>
      <tr>
        <td>2</td>
        <td>$510</td>
        <td>--</td>
      </tr>
      <tr>
        <td>3</td>
        <td>$15</td>
        <td>--</td>
      </tr>
    </tbody>
  </table>

  <h3>Total: <span id="money">€100,00</span></h3>

The key steps might be:

Select up all the tbody rows, and iterate over them.
A function to take the number string content of an element, and coerce it to a proper number.
Some new classes that can be added to the relevant table cells: one "green" which can be applied to the row, and "tick" which can render a tick as content.

I’ve made a couple of concessions/assumptions in this example

All amounts are using decimal points. There’s some confusion in your question about which locales you’re using (leading to a mix of Dollars and Euros) which isn’t particularly useful.
I’ve removed the currency symbols from the amounts to make the parsing of the numbers easier. You can change the "MONEY" table heading to "$" to ensure meaning isn’t lost.
I’ve left the last column empty.
I’ve removed the background color from the td CSS rule and added it as the tbody tr rule instead to ensure the new applied green colour sticks.

// Function to get the number from the text content of
// a DOM element
function getNumber(el) {
  return parseFloat(el.textContent);
}

// Cache the rows. Cache the formatted total by passing
// the #money element through the getNumber function
const rows = document.querySelectorAll('tbody tr');
const total = getNumber(document.querySelector('#money'));

// For each row get its second and third cells. From the
// second produce a formatted number from its text content.
// If it's less than the total add a "green" class to the row,
// and a tick to the third cell
rows.forEach(row => {
  const sum = row.querySelector('td:nth-child(2)');
  const tick = row.querySelector('td:nth-child(3)');
  if (getNumber(sum) <= total) {
    row.classList.add('green');
    tick.classList.add('tick');
  }
});

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

th {
  background-color: purple;
  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;
}

.green { background-color: green; }
.tick:after { content: '✓'; }

<table id="table-id">
  <thead>
    <tr>
      <th>A/A</th>
      <th>$</th>
      <th>GOAL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>100</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>200.25</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>500</td>
      <td></td>
    </tr>
  </tbody>
</table>


<h3>Total $<span id="money">200.25</span></h3>

Additional documentation

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Depending on numeric value and text, coloring table background

Answers